html 之table标签结构学习

时间:2023-03-09 09:11:37
html 之table标签结构学习

一、HTML table标签结构

html 中table标签的结构情况,如下所示:

<!-- table标签结构如下:
<table>
<thead>          # thead表格头部分,
<tr>            #tr 是table中的列,
<th>标题</th>    #th 是table中的标题部分的行
<th>标题</th>
<th>标题</th>
</tr>
</thead> <tbody>           #tbody 表格主题部分
<tr>           #tr 是table中的列
<td>内容</td>    #td 是table中主题部分的行
<td>内容</td>
<td>内容</td>
</tr>
</tbody>
</table>
-->

二、HTML中表格元素TABLE,TR,TD及属性的语法

(1)table:表格元素及属性

属性说明
width 表格宽度,单位为%或象素
border 表格边框线的粗细
cellspacing 表格间距
cellpadding 表格边距
bgcolor 表格背景颜色
bordercolor 表格边框线的颜色
align 表格的对齐方式:
  居中center 左对齐left  右对齐right

(2)属性说明举例:

  以下代码可以直接复制粘贴运行,通过运行结果我们可以更感谢的认识下table这个结构标签。

<table width="80%" border="1" cellspacing="1" cellpadding="4" bgcolor="#CC99FF" bordercolor="#0000FF" align="center">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

其他:

  tr:行元素

  td:列元素

  tr,td元素的属性基本相同,但增加行合并属性colspan="2" 和 列合并属性rowspan="2"。