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.删除多余的单元格

合并单元格范例