HTML—表格

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/arvinzd/article/details/52901068

网页中的表格可以用来展示数据，也可以用来规范内容

语法：<table>

<caption>表格标题</caption>

<tr>

<th>表格头1</th>

<th>表格头2</th>

<th>表格头3</th>

</tr>

<tr>

<td>内容1</td>

<td>内容2</td>

<td>内容3</td>

</tr>

</table>

表格属性

1、border 表格边框的厚度 默认0 数值

2、bordercolor 表格边框的颜色 ，默认黑色

3、width 表格宽度，单位px

4、height 表格高度，单位px，一般不建议设置

5、cellpadding 表格内容和单元格边框的距离，默认2像素

6、cellspacing 表格单元格与单元格的距离，默认2像素

7、align整个表格水平对其方式，取值right center left

8、bgcolor 表格的背景颜色

9、background表格的背景图片

10、rules 合并表格边框线 all

行属性

1、height 表格行高，一般不设置宽度

2、align 水平对齐方式 left center right

3、valign 垂直对齐方式 top middle bottom

4、bgcolor 行背景颜色

5、background 行背景图片

单元格属性

1、height 单元格高度

2、width 单元格宽度

3、align 水平对齐方式 left center right

4、valign 垂直对齐方式 top middle bottom

5、bgcolor 单元格背景颜色

6、background 单元格背景图片

横向合并和竖向合并

colspan横向合并

举例说明

<table rules="all" width="300" border="1">
<tr>
<td colspan="2">内容1</td>
<td>内容2</td>
</tr>
<tr>
<td>内容3</td>
<td colspan="2">内容4</td>
</tr>
<tr>
<td>内容5</td>
<td>内容6</td>
<td>内容7</td>
</tr>
</table>

内容1		内容2
内容3	内容4
内容5	内容6	内容7

rowspan竖向合并

举例说明

<table rules="all" width="300" border="1">
<tr>
<td>内容1</td>
<td>内容2</td>
<td rowspan="2">内容3</td>
</tr>
<tr>
<td rowspan="2">内容4</td>
<td>内容5</td>
</tr>
<tr>
<td>内容6</td>
<td>内容7</td>
</tr>
</table>

内容1	内容2	内容3
内容4	内容5
	内容6	内容7