网页设计:HTML表格标签
2020-12-07 本文已影响0人
前小小
表格组成:
- table 表格容器(外框)
-
<caption>
:定义表格的标题; -
<th></th>
:定义一个表格头; -
<tr></tr>
:定义一个表格行; -
<td></td>
:定义一个单元格;
标签属性:
1)table(表)常用属性:
- border:边框粗细
- height:高度
- width:宽度
- bgcolor:背景颜色
- background:背景图片
- cellspacing:单元格到单元格之间的距离
- cellpadding:单元格内容到单元格之间的距离
- align:表格在网页摆放位置
值:
left:左对齐
right:右对齐
center:居中对齐
<table border=" 值" height=" 值" width=" 值" cellspacing=" 值" cellpadding=" 值" align="值" >
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
2)tr(一行)属性:
- align:这一行单元格内容水平摆放方式;
值:
left:左对齐
right:右对齐
center:居中对齐
- valign:这一行单元格内容垂直摆放方式;
值:
left:左对齐
right:右对齐
center:居中对齐
<tr align="值" valign=" 值" >
<!-- 高宽与table的属性一致 -->
</tr>
3)td(单元格)属性:
- align:这一行单元格内容水平摆放方式;
值:
left:左对齐
right:右对齐
center:居中对齐
- valign:这一行单元格内容垂直摆放方式;
值:
left:左对齐
right:右对齐
center:居中对齐
<td align=" 值" valign=" 值">
</td>
单元格合并:
属性:
- colspan 指明这一个单元格横向占据几个单元格宽度 默认为1
- rowspan 指明这一个单元格纵向占据几个单元格高度 默认为1
例:
<table border="1" height="300" width="300" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2">1</td>
<td>3</td>
</tr>
<tr>
<td rowspan="2">4</td>
<td>5</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>