第二章网站开发基础之HTML教程 - 二、常用HTML标签：table，表格（块级元素）

本文链接：https://blog.youkuaiyun.com/klyz505/article/details/105381054

本文介绍了HTML的table标签，强调了其正确用途是显示表格数据而非布局。讲解了表格宽度的设置，包括像素和百分比单位。还讨论了表格内嵌标签，如tr、th、td以及不常用标签的局限性。提到了DreamWeaver作为编辑工具的便利性，并介绍了td的colspan属性及其在维护表格时的实用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

4.table，表格（块级元素）

table标签用于显示表格类数据。网站开发新手常用table标签来分隔和布局网页里的元素，这是错误的方法，table标签应当只用于显示表格类的数据。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>table标签</title>
</head>
<body>
例1：
<table border="1" width="380" cellpadding="3" cellspacing="10">
<tr>
<th>标题行第1列</th>
<th>标题行第2列</th>
</tr>
<tr>
<td>子行第1列</td>
<td>子行第2列</td>
</tr>
</table>
tr表示行，th或td表示列（th表示标题的列，自带加粗、居中渲染效果；td表示数据内容的列）。border属性设置表格的边框粗细；width属性设置表格的总宽度；cellpadding属性设置单元格与内容之间的空白大小；cellspacing属性设置单元格之间的空白大小；<br><br>

例2（加了css样式）：
<style type="text/css">
.newtable{background-color:#cccccc;}
.newtable th{background-color:#f0f0f0;font-size:14px;}
.newtable td{background-color:#ffffff;font-size:12px;}
</style>
<table class="newtable" border="0" width="380" cellpadding="3" cellspacing="1">
<tr>
<th width="250">标题行第1列</th>
<th>标题行第2列</th>
</tr>
<tr>
<td>子行第1列</td>
<td>子行第2列</td>
</tr>
</table>
标题行第1列指定了宽200，则标题行第2列的宽=表格总宽380-第1列宽250=130<br>
如果每一列都指定了宽，当每一列的宽之和超出表格总宽时，以每一列的宽之和为准；小于表格总宽时，以表格总宽为准。即哪个数值大，就以哪个数值为准。
</body>
</html>

效果如下：

（图2-29）

    表格的宽度除了指定精确的数值（像素）外，还可以指定为百分比，比如100%或50%。如果指定为百分比的话，则以上一级标签的宽度为100%来计算。比如一个指定宽为精确数值200（像素）的div内嵌一个table，当table指定总宽度为50%时，表格的实际宽度为200*50%=100（像素）。
    像素是指显示屏幕上的点，电脑显示屏幕由许许多多的点所构成，每1个点称为1个像素（当你很靠近电脑显示屏仔细看的时候，会发现电脑显示屏上有很多很细的点）。网页中常见的数值单位有：px（pixel，像素，屏幕上显示的最小单位，屏幕上的一个点称为一个像素）；pt（point，是一个标准的长度单位，1pt＝1/72英寸，常用于印刷业，不建议在网页中使用）；em（即%，在CSS中，1em＝100%，是一个比率）。
    表格的内嵌标签除了常用的tr、th、td，还有不常用的thead、tfoot、tbody。不常用的这三个标签很多浏览器都不支持，所以不建议使用。很多时候也不使用自带文字加粗效果的th标签。
    DreamWeaver在设计状态下可以很方便的编辑表格。请自行尝试练习：新建表格、拆分单元格、合并单元格、删除列、删除行。操作提示：在DreamWeaver的设计窗口中，右击表格的单元格，会弹出更多的操作选项，并且在DreamWeaver的最下方“属性”面板中可以看到各种能够设置的参数；鼠标点击在某个单元格中按住并拖动，在其它单元格中放开鼠标，可以选中多个单元格。
    td的属性里有一个属性是“colspan”，它是指单元格可横跨的列数。比如2行3列的表格，其中第1行的3列全部合并，那么代码为：

<table width="100%">
<tr>
<td colspan="3">第1行、占用3列</td>
</tr>
<tr>
<td>第2行第1列</td>
<td>第2行第2列</td>
<td>第2行第3列</td>
</tr>
</table>

如果表格的维护方式是直接修改其HTML代码，而不是使用Dreamweaver来编辑的话，建议将“colspan”的值设置为99或者更高的值，这样的话，如果增加第2行的td列数，可以不必再修改第1行横跨列的“colspan”属性值。否则，当第2行增加td标签后（第2行为4列），就需要修改第1行横跨列的“colspan”属性值为“4”；如果再增加1列，又要再修改成“5”……而如果设置为99，那么第2行的列数只要不超过99就不需要修改第1行横跨列的“colspan”属性值，减少维护时的工作量。这个技巧特别是在后面的章节学习PHP动态网页语言后，会更加实用，因为很多情况下表格会使用动态语言来生成或处理，设置“colspan”为大的值可以减少很多计算和工作量。