HTML表格

1. 表格的定义

   <table> 标签定义 HTML 表格。由 table 元素以及一个或多个 <tr>、<th> 或 <td> 元素组成表格结构，<tr> 元素定义表格行，<th> 元素定义表头，<td> 元素定义表格单元。

2. 表格的标签

   1 <table> 定义表格，生成的表格在一对<table></table>中；
   2 <caption> 定义表格标题，当表格需要标题时，使用<caption>表格标题</caption>
   3 <thead> 定义表格的页眉
   4 <tbody> 定义表格的主体
   5 <tfoot> 定义表格的页脚
   6 <th> 定义表格的表头，一般是表头中的内容会被加黑；
   7 <tr> 定义表格的行
   8 <td> 定义表格单元格
   9 <col> 定义用于表格列的属性
  10 <colgroup> 定义表格列的组

3. 单元格边框(border)

    表格边框：在使用<table border="1"></table> 的方式来定义，数字表示边框的宽度，单位为像素。

4. 合并单元格

合并单元格时，合并行使用：colspan=“2”； 合并列使用：rowspan=“2” （这里的 ‘2’ 表示合并两个单元格）

5. 表格格式设置

5.1 单元格的对齐（align）（居中，左对齐，右对齐）

align 值	left	center	right
效果	左对齐	居中	右对齐

5.2. 背景色&图片（bgcolor & background）

• 添加背景色使用：bgcolor
• 添加背景图片使用：background

5.3 单元格的边距（cellpadding）

在<table></table>标签使用cellpadding 

5.4 单元格间的距离(cellspacing)

在<table></table>标签使用 cellspacing

5.5 显示部分边框（frame & rules）

在<table></table>标签内，增加 frame 键值对，控制表格外边框。

frame	键值 效果
void	不显示外侧边框
above	显示上部的外侧边框
below	显示下部的外侧边框
hsides	显示上部和下部的外侧边框
vsides	显示左边和右边的外侧边框
lhs	显示左边的外侧边框
box	在所有四个边上显示外侧边框
borde	r 在所有四个边上显示外侧边框

 

在<table></table>标签内，增加 rules 键值对，控制表格外边框。

rules 键值	效果
none	没有线条
groups	位于行组和列组之间的线条
rows	位于行之间的线条
cols	位于列之间的线条
all	位于行和列之间的线条