HTML中的表格

私人博客

许小墨のBlog —— 菜鸡博客直通车

系列文章完整版，配图更多，CSDN博文图片需要手动上传，因此文章配图较少，看不懂的可以去菜鸡博客参考一下配图！

系列文章目录

前端系列文章——传送门
HTML系列文章——传送门

---

---

创建一个表格

<table border="" cellspacing="" cellpadding="" width="" height="">
	<caption>表格标题</caption>
	<tr>
		<th>Header</th>
	</tr>

	<tr>
		<td>Data</td>
	</tr>
</table>

表格由 <table> 标签来定义。
每个表格均有若干行（由 <tr> 标签定义）
每行被分割为若干单元格（由 <td> 标签定义）
字母 th 指表格列标题
字母 td 指表格数据（table data），即数据单元格的内容

表格的表头使用 <th> 标签进行定义 放在 <tr> 标签中下使用
大多数浏览器会把表头显示为粗体居中的文本

数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等

table 的属性值

width : 表格的宽度
height : 表格的高度
border : 显示表格的边框
bordercolor ：边框的颜色
bgcolor ： 表格的背景色
cellspacing : 单元格外边距      设置为 0 变成单线表格
cellpadding : 单元格内边距

tr 的属性值

height : 单元格的高度
align:   设置某一行文字的水平对齐方式  left  / center  / right
valign:  设置某一行文字的垂直对齐方式  top  / center  / bottom
bgcolor ： 表格的背景色

td 的属性值

width : 单元格的宽度
height : 单元格的高度
align:  设置某一个单元格文字的水平对齐方式   left  / center  / right
valign: 设置某一个单元格文字的垂直对齐方式   top  / middle  / bottom
bgcolor ： 表格的背景色
colspan : 向右合并单元格(跨列合并)
rowspan : 向下合并单元格(跨行合并)

---

注

本博文缺失大量图片，严重影响内容完整性以及阅读体验，完整内容请前往本人菜鸡博客——许小墨のBlog