HTML学习笔记——表格标签

HTML学习笔记（二）

一、表格标签
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></tr>
	<tr><td>黎明</td> <td>男</td> <td>18</td></tr>
	<tr><td>小星</td> <td>女</td> <td>18</td></tr>
</table>

效果

3.表头单元格标签
一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容居中加粗显示。

<th>标签标识HTML表格的表头部分（table head的缩写）
<table>
	<tr>
		<th>姓名</th>
		...
	</tr>
	...
</table>

示例：

     <table>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>黎明</td>
            <td>男</td>
            <td>18</td>
        </tr>
        <tr>
            <td>小星</td>
            <td>女</td>
            <td>18</td>
        </tr>
    </table>

效果：

总结：表头单元格也是单元格，只是常用于表格第一行，突出重要性，文本加粗居中显示。

4、表格属性
表格属性在实际开发中不常用，可以通过CSS来设置。
学习目的：
（1）.记住这些英语单词，CSS中会使用
（2）.直观感受表格的外观形态

属性应用示例1：
align属性为在页面中的显示位置，boder为边框属性

效果1：

表格属性应用示例2：
cellpadding（表格中的字和表格的距离，单位：像素）

效果图2：
红色划线即为cellpadding定义的距离

表格属性应用示例3：
cellspacing为表格间的距离（就是上面表格中的空白）

效果图3：

表格属性应用示例4：
width属性为单元格的宽度，height为单元格的高度。

效果图4：

5.表格结构标签
（1）、使用场景：
有时表格会很长，为了更好地表示表格的语义，可以将表格分为两大部分：表格头部和表格主体
（2）、标签名：

在表格标签中，分别用:<thead>标签表示表格头部区域，<tbody>标签表示表格主体区域
<thead></thead>:用于定义表格的头部，<thead>标签中必须含有<tr>标签
<tbody></tbody>:用于定义表格的主体，内部主要用于存放数据
<thead></thead>、<tbody></tbody>必须放在<table></table>(表格标签)中

6.合并单元格
（1）、合并方式
跨行合并：rowspan =“合并单元格个数”
跨列合并：colspan = “合并单元格个数”
（2）、目标单元格
跨行合并：最上侧单元格为目标单元格，在标签内写合并代码。
跨列合并：最左侧单元格为目标单元格，在标签内写合并代码。

（3）、合并步骤
先确定合并的方式；
然后找到目标单元格，写上合并方式 = 合并单元格数量；
最后删除多余的单元格。

<table width="500" height="249" border="1" cellspacing="0">
        <tr>
            <th></th>
            <th colspan="2"></th>
			 <!-- 这里的单元格因跨列合并，而变成了多余的单元格，因此删除 --> <!-- 我的理解：相当于左侧单元格向右增加了一个单元格的长度，把这个单元格位置占了，所以这个单元格变成了多余的单元格 -->
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
			<!-- 这里的单元格因跨行合并，而变成了多余的单元格，因此删除 --> <!-- 我的理解：相当于左侧单元格向下增加了一个单元格的长度，把这个单元格位置占了，所以这个单元格变成了多余的单元格 -->
            <td></td>
            <td></td>
        </tr>
    </table>

效果：