表格基础:

创建一个简单的表格至少有三个标签组成,分别是<table>、<tr>、<td>标签。

table:表格,定义的是整个的表格大结构。

tr:table rows,表格的行,定义的是表格由多少行组成。

td:table data,表格数据,也叫表格单元格,定义的是每一行内部的单元格。

三者的关系:table>tr>td.一个表格中有多个行,每个行中有多个单元格。

<table>的属性:

<table>标签可以添加border边框属性。

属性值:数字,表示像素值。

表格的单元格之间有默认的空隙,会导致双线边框。

解决方法:设置标签样式属性style。

属性值:border-collapse : collapse; 表示边框塌陷。

 

表头单元格:

如果要绘制表头,使用标签<th>,table head data,表头单元格。

在表格中绘制的时候,替换的是<td>的位置。

<th>标签中自带默认的css样式效果,文字显示粗体居中。

合并单元格:

常见的表格操作中,有一种叫做合并单元格,可以通过单元格属性进行设置。

单元格属性:

表格的单元格可以进行合并,通过<th>和<td>的两个属性可以进行合并设置。

rowspan:跨行和并。上下的合并。

colspan:跨列合并。左右的合并。

属性值:数字,数字是几表示跨几行或跨几列合并。

制作技巧:

1.先列出所有行<tr>,以最小单元格为标准。

2.再添加每一行的<td>或<th>单元格。

3.划分单元格所在行时,顶边对齐的属于同一行。

4.将所有行和列写完后,再查看哪个单元格有跨行或跨列,属性值的个数要参考最小的单元格。

表格分区:

一个完整的表格分为四个大的区域:表格标 题、表格头部、表格主体、表格页脚。

分区标签:

<table>内部最直接的子级包含四个分区标签,他们都是双标签。

caption:表格的标题,内部书写标题文字。

thead:table head,表格的头部。内部嵌套tr>th。

tbody:table body,表格的主体。内部嵌套tr>td。

tfoot:table foot,表格的页脚。内部嵌套tr>td。

四个分区可以选择性的进行组合。

注意:不论书写顺序如何颠倒,浏览器中的加载顺序都是自动按照caption、thead、tbody、tfoot执行的。

制作技巧:

1.先书写大分区标签结构。

2.填充每个分区的内部内容

3.如果有合并单元格内容,进行单元格合并。