表格标签的详解

表格标记

表格是有行、有列。作用：显示表格类的数据。

文字、图片、表格套表格

一个表格的结构：

图示：以下是一个两行四列的一个表格

名称	苹果
价格	6
总价	12

 

 

语法结构:

<table>

<caption>表格的标题</caption>

    <tr>

        <th></th>

<th></th>

<th></th>

<th></th>

</tr>

    <tr>

        <td></td>

<td></td>

<td></td>

<td></td>

</tr>

</table>

<table>的常用属性

Width:设置表格宽度

Height：设置表格的高度

Border：表格边线的粗细

Bordercolor：设置表格边框线的颜色

Align：设置表格的对齐方式：left左对齐 right右对齐 center居中对齐

bgColor：设置表格的背景色

background：URL 设置表格的背景图片

Cellpadding：内填充。用于设置单元格与内容之间的距离(内填充)，属性值可为整数的像素值或百分比值

cellspacing：：外填充。用于设置单元格与单元格之间的距离，属性值可为整数的像素值或百分比值

 

<tr>的常用属性

•     Align：水平对齐方式：Left向左 ,right向右 ,center居中
•     Valign：垂直对齐方式 top向上 bottom 向下middle居中
•     bgColor：设置行的背景色
•     height：设置行的高度

<td>或<th>的常用属性

学生信息登记表

 

姓名	性别	年龄	身高
小明	女	18	180
老王	男	30	175

th在显示上的效果区别是：

1. 将文字内容加粗显示
2. 单元格的内容会水平居中对齐

 

合并单元格

• colspan    合并列的单元格(跨列合并)
• rowspan    合并行的单元格(跨行合并)
• 合并步骤：
• 第一步：找到合并起始的单元格
• 第二步：删除其后被合并的单元格

 

<caption>表格标题

描述：<caption>是给一个表格增加一个标题

格式：<caption>内容</caption>

说明：

    <caption>标记是<table>的子标记；

    <caption>应该紧跟表格的开始标记，在所有的行之前的位置；

    一个表格只有一个<caption>

thead、tbody、tfoot

可以使用火狐浏览器里面的firebug工具查看：

thead、tbody、tfoot

作用：对表格进行逻辑上的划分。

thead、tfoot 以及 tbody标签实现一个表格示例，这三个标签分别代表表格的头部（th）、主体、和底部，能让表格更加语义化的同时，也能让我们更加方便的控制表格的表现

人为划分演示代码：

 

firebug工具解析后的显示效果如下：

练习：

分析：

1. 标题caption
2. 这是一个8行，8列的表格
3. 表格的第一个有个表头，需要使用的标签可能是th
4. 表格的部分单元格需要合并
5. 需要设置表格的颜色

综合：

 

效果：