上次提到用來序列項目的清單,這次來講講可以放更多、更複雜的資料的表格吧!
在講解表格的寫法之前,我們先來好好釐清一件事,那就是讓人常常混淆的「行」與「列」。
曾經聽過,在不同的國家,行和列有不同的定義,不過在 html 裡,橫排的稱做列(row),直排的稱作行(column),我們可以用「橫列直行」這個口訣來記。
首先,一個表格需要一組 <table> </table>
標籤
裡面放入橫排的 table row,標籤為縮寫 <tr> </tr>
再放入資料的儲存格 table data,標籤為縮寫 <td> </td>
就像這樣一層一層包住
範例如下圖
記得在 <table>
標籤內加上 border
邊框屬性,表格才會有框線。
數字1代表框線厚度為1px
若要跨行合併,也就是左右合併的話,就在 <td>
標籤內放入 colspan=”數字”
,並把不需要的儲存格 <td>
刪掉
若是要跨列合併,也就是上下合併的話,就在 <td>
標籤內放入 rowspan=”數字”
, 並把不需要的儲存格 <td>
刪掉
另外,也可以使用更語意化的標籤來寫表格,把表頭<thead>
、表格內容<tbody>
、表尾<tfoot>
分清楚,如此一來便能更方便的分別對他們做不同的樣式變化了<thead>
標籤裡用的 <th>
標籤通常有加粗、置中的預設樣式