HTML表格标签

合集 - html-css-js(5)

1.学习html--前言2023-11-212.HTML常用标签2023-11-21

3.HTML表格标签2023-11-21

4.HTML-列表标签2023-11-225.html-表单2023-11-23

收起

表格标签

1. 表格的主要作用：

表格主要用于显示，展示数据，因为他可以让数据显示的非常的规范，整洁，可读性非常好。

2. 表格的基本语法

<table>
	<tr>
		<td>单元格内的文字</td>
		……
	</tr>
	……
</table>

1. <table></table>是用于定义表格的标签
2. <tr> </tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中
3. <td> </td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中
4. 字母td指表格数据(table data)，即数据单元格的内容

    <table>
        <tr>
            <td>学号</td>
            <td>姓名</td>
            <td>班级</td>
            <td>年龄</td>
        </tr>
        <tr>
            <td>23001</td>
            <td>月初</td>
            <td>1班</td>
            <td>17</td>
        </tr>
        <tr>
            <td>23004</td>
            <td>寒鸦肆</td>
            <td>2班</td>
            <td>19</td>
        </tr>
    </table>

表头单元标签

表头单元格位于表格的第一行或第一列，表头单元格的文本内容加粗居中显示(表头单元格也是单元格 突出重要性)

<table>
	<tr>
		<th>单元格内的文字</th>
		……
	</tr>
	……
</table>

• <th>标签表示HTML表格的表头部分(table head的缩写)

    <table>
        <tr> <th>姓名</th> <th>性别</th> <th>电话</th> </th>
        <tr> <td>月初吖</td> <td>男</td> <td>110</td> </tr>
        <tr> <td>终不似当年模样</td> <td>男</td> <td>120</td> </tr>
    </table>

表格相关属性

属性名	属性值	描述
align	left(左对齐)，center(居中)，right(右对齐)	规定表格相对周围元素的对齐方式
border	1或""	规定表格单元格是否拥有边框，默认为""，表示没有边框
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认1像素
cellspacing	像素值	规定单元格之间的空白，默认2像素值
width	像素值或百分比	规定表格的宽度

这些属性要写到表格标签table里面

border="1" cellspacing="0" border：单元格拥有边框 cellspacing：单元格与单元格之间像素为0

表格结构标签

可以将表格分割成表格头部和表格主体两大部分

在表格标签中，分别用<thead>标签 ：表格的头部区域    <tbody>标签：表格的主体区域  <tfoot>：表格底部

合并单元格

合并单元格三部曲

1. 确定是跨行合并跨列合并

2. 找到目标单元格，写上合并方式="合并的单元格数量"。比如td colspan="2"> </td>

3. 删除多余的单元格

• 通过左上原则，确定保留谁删除谁
  1. 上下合并--只保留最上面，删除其他
  2. 左右合并--只保留最左边，删除其他

跨行合并（rowspan） 跨列合并（colspan）

1. rowspan:跨行合并，将多行单元格垂直合并
2. colspan：跨列合并，将多个单元格水平合并

• 只有同一个结构标签中的单元格才能合并，不能跨结构合并（不能跨：thead，tbody，tfoot）

    <table width="500" height="249" border="1" cellspacing="0">
        <tr>
            <td></td>
            <td colspan="2"></td>
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </table>