Day 02 HTML<表格标签>

表格标签主要用来显示以及展示数据，可用表格标签排版後让数据更容易阅读

1. 表格基础标签简易介绍 ( 以code表示 ) :

<table> 表示表格的开始直到结束
<tr> 表示行 此为第一行 
<!-- 表头单元格会自动加粗以及垂直置中 -->
<th>表头单元格...1</td> 表示此行内的第1个表头单元格 
<th>表头单元格...2</td> 表示此行内的第2个表头单元格
</tr>
<tr> 表示行 此为第二行  
<td>...1</td> 表示此行内的第1个单元格 
<td>...2</td> 表示此行内的第2个单元格
</tr>
</table> 

2. 表格其他相关属性介绍 :　

表格相关属性 请打开此codepen连结

语法范例 :

<!-- 表格开始 -->
 <table border="1px">
     <!-- 此tr表示第一行 -->
     <tr>
         <th>
             表头单元格1
         </th>
         <th>
             表头单元格2
         </th>
         <th>
             表头单元格3
         </th>
     </tr>
     <!-- 此tr表示第二行 -->
     <tr>
         <td>
             表格内单元格4
         </td>
         <td>
             表格内单元格5
         </td>
         <td>
             表格内单元格6
         </td>
     </tr>
     <!-- 此tr表示第三行 -->
     <tr>
         <td>
             表格内单元格7
         </td>
         <td>
             表格内单元格8
         </td>
         <td>
             表格内单元格9
         </td>
     </tr>
 </table>
 <!-- 表格结束 -->

以上范例展示结果

3. 表格结构标签 :

<thead>标签表格的头部区域
<tbody>标签表格的主体区域
<tfoot>标签表格的底部区域

W3school 说明

表格结构标签因有浏览器问题所以知道就好(codepan)

4. 合并单元格
合并单元格方式:

跨行合并 rowspan="合并单元格的个数"
跨列合并 colspan="合并单元格的个数"

合并单元格的步骤:
1.先确定需要跨行合并还是跨列合并
2.找到目标单元格 写上所需要的合并方式以及需要合并的数量
EX:<td rowspan="2">...</td>
3.删除多余的单元格

合并单元格范例