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中没有数据时,可以使用一个空白符 放入到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>