Html布局中简单的table的制作方法

来源：互联网发布：如何解除淘宝限制登录编辑：程序博客网时间：2024/04/29 01:20

在古老的浏览器网页中，相当部分布局是由table表格完成的，本文分享一下table标签的一些用法和常用属性设置。

如下图所示，一个基本的单元格table除了整体宽高属性之外还包括内部的标题单元格th，每一行的属性tr，以及基本单元格td，分别对这些基本组成部分进行属性设置即可做出所要求的表格。

以上图表格的实现代码为例：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">.table1{width: 640px;height:90px;}.tr1{background: #dbe3fa;}#pic1{background: url(img/qing.png) no-repeat center;width: 65px;}#pic2{background: url(img/wan.png) no-repeat center;width: 65px;}</style></head><body><table class="table1" border="1px" cellspacing="0px" cellpadding="8px"  ><tr class="tr1"><th colspan="2">日期</th><!--列合并用colspan--><th colspan="2">天气现象</th><th>气温</th><th>风向</th><th>风力</th></tr><tr><td rowspan="2">22日星期五</td><td>白天</td><td id="pic1"></td><td>晴转多云</td><td style="color: #ff8000;">高温7℃</td><td>无持续风向</td><td>微风</td></tr><tr><td>夜间</td><td id="pic2"></td><td>晴</td><td>低温-4℃</td><td>无持续风向</td><td>微风</td></tr></table></body></html>

1.设置表格整体属性table

包括表格的宽width，高height，单元格边框border，单元格之间距离cellspacing（若不设置此项为0，单元格则会成为一个个独立分开的小格子），设置单元格内容到边框距离cellpadding。

2.设置表格行tr

表格分为几行就有几个tr，再在每一行里面设置th或td。

3.设置标题单元格th

标题th往往会占几列，需要使用colspan设置所占列数，在下方的基本单元格td中就会按顺序占据一定列数。

4.设置基本单元格td

Td的数量要根据th所在的列数设置好，当td需要占两行时，需要用rowspan设置所在行数，而在下一个tr设置中，就不需要设置这个已经独占两行的td了。

5.可通过一些常用的属性设置单元格背景颜色，插入图片等，当cellspacing不为0时，也可以利用border-collapse：collapse属性将两个单元格之间的边框合并增强美观。

Table单元格的设置主要注意区分tr，th和tr，以及注意colspan和rowsspan所占的列数和行数，基本操作上很简单。

0 0