7.30前端之Html表格

涉及到的標籤

• <table>

• <tr>

• <th>

• <td>

實現列排序、行排序、一列多值排序、一行多值排序等

標籤邏輯

• <table>包裹內的內容是表格內容

• <tr>定義表頭

• <th>是表頭

• <td>是值

帶邊框屬性的表格例項

       <table border="1">
           <tr>
               <th>key</th>
               <th>value</th>
           </tr>
           <tr>
               <td>帥氣逼人</td>
               <td>的你</td>
           </tr>
       </table>
 

不帶邊框的表格例項

       <table border="0">
           <tr>
               <th>key</th>
               <th>value</th>
           </tr>
           <tr>
               <td>帥氣逼人</td>
               <td>的你</td>
           </tr>
       </table>

       <table>
           <tr>
               <th>key</th>
               <th>value</th>
           </tr>
           <tr>
               <td>帥氣逼人</td>
               <td>的你</td>
           </tr>
       </table>
 

垂直標題表格例項

       <table border="1">
           <tr>
               <th>key</th>
               <td>帥氣逼人，的你</td>
           </tr>
           <tr>
               <td>value</td>
               <td>是真的帥氣，真的逼人</td>
           </tr>
       </table>
 

帶標題的表格--->用到新的標籤<caption>

在表頭元素前加上caption元素

       <table border="1">
           <caption>帥氣逼人表</caption>
           <tr>
               <th>人名</th>
               <th>長相程度</th>
           </tr>
           <td>Lucifer</td>
           <td>和我一樣</td>
       </table>

單行跨格兩列--->使用新標籤<colspan>

       <table border="1">
           <caption>帥氣逼人表</caption>
           <tr>
               <th>人名</th>
               <th colspan="2">長相程度</th>
           </tr>
           <td>Lucifer</td>
           <td>和我一樣</td>
           <td>真的帥氣</td>
       </table>

單列跨格兩行--->使用新標籤<rowspan>

       <table border="1">
           <tr>
               <th rowspan="2">key</th>
               <td>帥氣逼人，的你</td>
           </tr>
           <tr>
               <td>沒人比你帥氣</td>
           </tr>
           <tr>
               <th>value</th>
               <td>是真的帥氣，真的逼人</td>
           </tr>
       </table>

要注意區分單列跨兩行和單行跨兩列的區別：

單行跨兩列：

• 給<th>標籤新增元素colspan

• 在一個表頭下寫兩個<td>值即可

單列跨兩行：

• 給<th>標籤新增元素rowspan

• 要新增兩行要令其表頭填寫<td>

• 不需要重寫<th>標籤

表格內含表格等內容

       <table border="1">
           <caption>帥氣程度表</caption>
           <tr>
               <td>
                   <p>這是一個段落</p>
                   <p>這裡面有一些內容</p>
               </td>
               <td>這個單元格包含一個表格:
                   <table border="1">
                       <tr>
                           <td>A</td>
                           <td>B</td>
                       </tr>
                       <tr>
                           <td>C</td>
                           <td>D</td>
                       </tr>
                   </table>
               </td>
           </tr>
           <tr>
               <td>這個單元格包含一個列表
               <ul>
                   <li>apples</li>
                   <li>bananas</li>
                   <li>pineapples</li>
               </ul>
               </td>
               <td>Hello</td>
           </tr>
       </table>

這裡要注意幾個問題：

• 內嵌表格是在<td>標籤內部內嵌<table>標籤，再在內嵌的<table>標籤內些<tr>等表格標頭標籤

• 注意標頭插入的位置