HTML之Table表单的属性以及用法-优快云博客

一、表格的常用属性

（1）table的常用属性

1.width、height 定义表格的长和宽

2.align 是整个表格相对于父元素的对齐方式

3.border 整个表格外围的的边界宽度

4.cellspacing 单元格外边距，即单元格之间的间距默认不为0

5.cellpadding 单元格内边距，即单元格中的内容与边界的距离

6.bgcolor 背景颜色

（2）tr标签的常用属性

1.align 该行的内容，水平对齐方式

2.valign 改行的内容，垂直对齐方式

3.bgcolor 每行的背景颜色

（3）td标签的常用属性

1.width

2.height

3.align

4.valign

5.bgcolor

6.colspan 合并水平单元格

7.rowspan 合并垂直单元格

（4）th标签该标签的作用和td差不多，不同的是该标签中的内容是列的标题

（5）caption标签该标签的作用就是给表格设置题目直接使用<caption>标题名称</caption>

（6）thead标签表头

（7）tbody 表主题

（8）tfoot 表尾

ps：可以将表格整体分为三部分thead、tbody、tfoot，如果使用时不加以使用，则默认表格内容都在tbody该部分中

二、使用--------至多一个菜谱

<table align="center" width=400px cellspacing=0 cellpadding=3 border=1 height=180px>
<tr align="center"><td colspan=3>星期一菜谱</td></tr>
<tr align="center"><td rowspan=2>素菜</td><td>青草茄子</td><td>花椒土豆</td></tr>
<tr align="center"><td>小葱豆腐</td><td>炒白菜</td></tr>
<tr align="center"><td rowspan=2>荤菜</td><td>鱼香肉丝</td><td>油焖大虾</td></tr>
<tr align="center"><td>海参鲍鱼</td><td>宫保鸡丁</td></tr>
</table>

说明：

table标签里面的属性：创建一个高为180，宽为400，边界线大小为1，表内单元格间的间距为0，单元格和单元格内部的内容的间距为3的一个表格，并且表格相对于父元素居中对齐

tr标签的属性：每行数据内容都居中对齐

td标签的属性：colspan=3该属性可以使得该单元格占用原来水平三个单元格的大小位置，rowspan=2该属性可以使得该单元格占用原来垂直单元格俩个位置大小

效果图：