31-10000 web入門 HTML5 表格以及九宮格案例製作
阿新 • • 發佈：2021-11-19
學習程式碼1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表格</title> </head> <body> <table border="1" bgcolor="red"> <tr> <td>單元格1</td> <td>空</td> <td>單元格3</td> </tr> <tr> <td>1</td> <td></td> <td>3</td> </tr> <tr> <td> <ul> <li>蘋果</li> <li>蘋果</li> <li>蘋果</li> </ul> </td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> </tr> </table> </body> </html>
效果
九宮格表格案例
程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 九宮格里面有9種不同的眼色 --> <table border="1" bgcolor="red"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </table> <table border="1" bgcolor="green"> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table> <table border="1" bgcolor="blue"> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table> <!-- <table border="1" bgcolor="red"> <tr> <td>1</td> </tr> </table> <table border="1" bgcolor="blue"> <tr> <td>1</td> </tr> </table> --> </body> </html>
效果