HTML中表格标签的使用

HTML中表格标签的使用

表格的结构

HTML中的表格和我们平时用的excel表格的结构基本是一致的，由行和列以及单元格构成。

通常情况下，同行的高度一致，同列的宽度一致。简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。（col、colgroup两个元素在CSS中再讲）

表格的相关元素

1、<table>标签

HTML表格以<table>标签开始，以<table>标签结束。其中table有不少属性，比如：border,bordercolor,cellspacing,width,height,bgcolor。

boder表示外框边线的粗细，bodercolor表示边线的颜色，cellspacing表示单元格之间的空隙,width表示表格的宽，height表示表格的高，bgcolor表示背景色。Align表示水平对齐方式，在行或单元格中还有valign表示垂直对奖方式 .

2、表格里一般由多行组成，行由<tr>标签进行表示，因此<tr>标签一般有多行。在<tr>中只能包含<td>或是<th>两种元素。

3、<td>表示单元格，假设一个表格有一行五列即有5个单元格，有5个<td>。

<td>中有两个重要的属性为：

colspan：指定单元格跨多少列，简称跨列
rowspan：指定单元格可横跨的行数，简称跨行

如果一个td中没有数据时，可以使用一个空白符&nbsp;放入到td中，否则浏览器可能无法显示出表格的边框来。

4、表格的标题用<caption>表示，表格的标题一般为0或1个。

5、表格页眉的单元格用<th>表示，与<td>标签类似，放在<tr>标签里。

6、在HTML5时代，按照表格的结构，一般可以分为三个模块：

<tbody>定义表格的主体，内容
<thead>定义表格头，即表头
<tfoot>定义表格的脚

上述各标签组成一个基础表格，如下图所示一一对应

<table border="1" bordercolor="blue" cellspacing="0" width="400" height="150">
			<caption>我最喜欢的歌曲</caption>
			<thead>
				<tr align="center">
					<th>歌名</th>
					<th>作者</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>光辉岁月</td>
					<td>Beyond</td>
				</tr>
				<tr>
					<td>红豆</td>
					<td>王菲</td>
				</tr>
				<tr>
					<td>我只在乎你</td>
					<td>邓丽君</td>
				</tr>
				<tr>
					<td>倩女幽魂</td>
					<td rowspan="2">张国荣</td>
				</tr>
				<tr>
					<td>有谁共鸣</td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<td colspan="2">现总共：5首歌曲</td>
				</tr>
			</tfoot>
		</table>

解析：
1、在<thead>中有歌名和作者，用的是<th>标签进行修饰。<th>标签一般都是粗体字，居中显示
2、蓝框部分的内容用的是<td>标签，<td>标签的内容一般都是居左显示，不加粗字体。
3、蓝框中的每一行即为<tr>标签
4、“张国荣”这一个单元格跨越了2行，即表示为rowspan=“2”
5、紫框部分为<tfoot>标签，跨越了2列，即表示为colspan=“2”

表格标签一般在什么情况下使用？

1、主要用于规则的数据显示
2、适当的时候可以在表单页面中使用

作业练习

制作表格

读代码，绘表格
<table border="1" bordercolor="blue" cellspacing="0" width="400" height="150">
<tr><td colspan="3" align="center">个人信息</td></tr>
        <tr align="center"><td>姓名</td><td>性别</td><td>年龄</td>    </tr>
        <tr><td>carson</td><td>男</td><td rowspan="3">24</td></tr>
        <tr><td>thl</td><td>女</td></tr>
        <tr><td>Alice</td><td>女</td></tr>
            </table>