HTML入門13

標籤：ken   ase   lsp   -name   scope   robots   rop   lin   屬性   

　　構建表格

　　使用colspan和rowspan添加無單位的數字值作為屬性來實現行合并和列合并；

<col>來定義列的樣式，每一個<col>都會制定每列的樣式，對於不需要指定列的樣式，仍需要一個空的<col>元素，如果不這樣，樣式會應用到第一列上，就停止；

<colgroup>

<table>  <colgroup>    <col>    <col style="background-color: yellow">  </colgroup>  <tr>    <th>Data 1</th>    <th>Data 2</th>  </tr>  <tr>    <td>Calcutta</td>    <td>Orange</td>  </tr>  <tr>    <td>Robots</td>    <td>Jazz</td>  </tr></table>

</colgroup>

其中兩個col元素，應用兩列的樣式資訊；<col span="2">代表將空元素的樣式應用到表格中兩列，

　　caption標題，為表格添加標題，把他放在table標籤下面，summary屬性在table元素中似乎用，接下來給表格添加thead、tfoot、tbody結構。

　　巢狀表格格，在一個表格裡嵌套另一個表格是可能的，只要包含完整的結構，

　　接觸到一個表格新屬性，scope這都是第一遍漏掉的知識點，/可以添加在th元素中，協助螢幕助讀程式設用者更好理解標題儲存格，閱讀器會識別這種結構化的標記並讀出整列或整行，scope="row"還可以選”colgroup“"rowgroup" 

<thead>  <tr>    <th id="purchase">Purchase</th>    <th id="location">Location</th>    <th id="date">Date</th>    <th id="evaluation">Evaluation</th>    <th id="cost">Cost (€)</th>  </tr></thead><tbody><tr>  <th id="haircut">Haircut</th>  <td headers="location haircut">Hairdresser</td>  <td headers="date haircut">12/09</td>  <td headers="evaluation haircut">Great idea</td>  <td headers="cost haircut">30</td></tr>  ...</tbody>

　　id和標題屬性，使用id和headers屬性創造標題和儲存格之間的聯絡。td裡通過headers屬性包含th元素裡的id值，創造精確聯絡，

HTML入門13