html语言代码table,HTML标签之table(示例代码)

最新推荐文章于 2024-05-17 02:15:33 发布

陽心

最新推荐文章于 2024-05-17 02:15:33 发布

阅读量1.1k

点赞数

文章标签： html语言代码table

对于table来说，在一些小的模块中进行表格布局是非常好用的。我们可以这样来理解table，主要分成table部分和td部分。

table部分：

主要是来控制外边框的(就是最外面一层边框，不包括里面部分)，它拥有的属性为：margin属性，border属性，cellspacing属性，规定单元格之间的空白cellpadding属性，规定单元边沿与其内容之间的空白。

tr部分：

主要来分割有几行，一般只需要用来设定heigth。

td部分：

用来控制每个单元格的属性，可是分别控制每个单元格的上下左右边框，其中也包含padding属性。

th部分：

用法和td相同，只是用来区分表头的。

注意：

用百分比和用像素点是相同的。在table中，width指的是整个表格的宽度，而td的width值得指内部不包括内容content的宽度，这个同盒子模型。

以下用实例来说明table的一些常用布局手法：

注释:

border 设置所有边框的属性值 border=1 数值越小边框越细

bordercolor =”red” 指的是边框颜色为10

cellpadding :规定单元边沿与其内容之间的空白.,数值越大表格越大. (表格填充,用于隔开单元格与单元格的空间)

(图1)

cellspacing=8 单元格与单元格之间的空隙距离.把表格想象成用铁丝做的一个框,cellspacing的属性值就相当于是用8格像素的厚度做的表格.(如图1)

th:定义表头,可以用来合并单元格比如把第二行,第二三列合并.

如上所示:假设rowspan=2 合并两行的同时,不删除

10 那最后一列就由3列变为4列

%E5%90%88%E5%B9%B6%E8%A1%8C-300x106.png

colspan 是列合并 colspan=”2″ 就是合并两列

rowspan是行合并

11111111111111111111111234合并单元格

合并列89111211111111111111111111111234合并单元格

合并列891112

合并行之后,把

10 删掉的情况

%E5%90%88%E5%B9%B6%E5%90%8E%E5%88%A0%E9%99%A4%E4%B8%80%E6%A0%B7%E7%9A%84%E6%83%85%E5%86%B5-300x111.png

关注