HTML5表格是網頁設計中常用的一種元素,可以用來展示各種數據。在表格設計中,table、tr(行)和td(列)是常見的標簽,而其他標簽如caption、thead、tbody、tfoot、th等也可以用來完善表格的結構和樣式。
下面展示一個簡單的HTML5表格代碼:
<table> <caption>水果價格表</caption> <thead> <tr> <th>水果名稱</th> <th>單價(元)</th> <th>產地</th> </tr> </thead> <tbody> <tr> <td>蘋果</td> <td>6.5</td> <td>山東</td> </tr> <tr> <td>香蕉</td> <td>3.5</td> <td>廣西</td> </tr> </tbody> <tfoot> <tr> <td colspan="3">以上價格僅供參考</td> </tr> </tfoot> </table>在這個表格中,使用了<caption>來顯示表格標題,<thead>用來定義表格頭部,<tbody>用來定義表格主體,<tfoot>用來定義表格腳注。<th>用來定義表格頭部單元格,而 <td>用來定義表格主體單元格。 此外,<colspan>屬性可以用來合并單元格:
<table> <tr> <th colspan="2">標題</th> <th>標題</th> </tr> <tr> <td>內容1</td> <td>內容2</td> <td>內容3</td> </tr> </table>這個表格中,第一個單元格合并了兩個列,使用了colspan="2"屬性。可以看出,HTML5表格是功能強大且靈活的元素,可以用來展示和管理各種數據。
上一篇html5表格樣式代碼
下一篇js控制css跳轉