1.表格的基本结构
建立表格需要用到<table></table>标签；
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><table border="1"><!-- <tr>表示一行，<td>表示一列，<th>表示标题行 --><tr> <th>1</th> <th>2</th> <th>3</th></tr><tr> <td>1-1</td> <td>1-2</td> <td>1-3</td></tr><tr> <td>2-1</td> <td>2-2</td> <td>2-3</td></tr><tr> <td>3-1</td> <td>3-2</td> <td>3-3</td></tr><tr> <td>4-1</td> <td>4-2</td> <td>4-3</td></tr></table></body></html>
复制代码
运行结果：
2.合并单元格
单元格左右合并用 colspan 属性，上下合并用 rowspan 属性；
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><table border="1"><!-- <tr>表示一行，<td>表示一列，<th>表示标题行 --><tr> <th>1</th> <th>2</th> <th>3</th></tr><tr> <!-- 左右合并用colspan，将表格的第1行的第1列和第2列合并， --> <td colspan="2">1-1-2</td> <td>1-3</td></tr><tr> <td>2-1</td> <!-- 上下合并用rowspan，将表格的第2行的第2列和第3行的第2 列进行合并 --> <td rowspan="2">2-3-2</td> <td>2-3</td></tr><tr> <td>3-1</td> <td>3-3</td></tr><tr> <td>4-1</td> <td>4-2</td> <td>4-3</td></tr></table></body></html>
复制代码
运行结果：
3.用 align 属性设置对齐方式
设置表格内容居中用 align 属性，有 left，center，right 三个属性值，默认是 left；
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><table border="1" width=400> <!-- 表格宽度设置为400 --><!-- <tr>表示一行，<td>表示一列，<th>表示标题行 --><tr> <th>1</th> <th>2</th> <th>3</th></tr><tr align="center"> <!-- 设置表格的第1行所有数据居中 --> <!-- 左右合并用colspan，将表格的第1行的第1列和第2列合并， --> <td colspan="2">1-1-2</td> <td>1-3</td></tr><tr> <td>2-1</td> <!-- 上下合并用rowspan，将表格的第2行的第2列和第3行的第2 列进行合并 --> <td rowspan="2" align="center">2-3-2</td> <!-- 设置合并的第2列数据居中 --> <td>2-3</td></tr><tr> <td>3-1</td> <td>3-3</td></tr><tr> <td>4-1</td> <td>4-2</td> <td>4-3</td></tr></table></body></html>
复制代码
运行结果：
4.用 bgcolor 属性设置表格背景颜色
设置表格背景颜色用 bgcolor 属性；
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><table border="1" width=400 bgcolor="red"> <!-- 表格宽度设置为400，背景颜色为红色--><!-- <tr>表示一行，<td>表示一列，<th>表示标题行 --><tr> <th>1</th> <th>2</th> <th>3</th></tr><tr align="center"> <!-- 设置表格的第1行所有数据居中 --> <!-- 左右合并用colspan，将表格的第1行的第1列和第2列合并， --> <td colspan="2">1-1-2</td> <td>1-3</td></tr><tr> <td>2-1</td> <!-- 上下合并用rowspan，将表格的第2行的第2列和第3行的第2 列进行合并 --> <td rowspan="2" align="center" bgcolor="green">2-3-2</td> <!-- 设置合并的第2列数据居中，背景颜色为绿色--> <td>2-3</td></tr><tr> <td>3-1</td> <td>3-3</td></tr><tr bgcolor="yellow"><!-- 将表格的第4行设置为黄色 --> <td>4-1</td> <td>4-2</td> <td>4-3</td></tr></table></body></html>
复制代码
运行结果：
5.用 cellpadding 属性和 cellspacing 属性设定边距
5.1 cellspadding 属性设定表格单元格中的内容距离格线的距离（俗称“内间距”）
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><!-- 表格宽度设置为400，背景颜色为红色，表格内容距离格线的距离为20px--><table border="1" width=400 bgcolor="red" cellpadding="20px"><!-- <tr>表示一行，<td>表示一列，<th>表示标题行 --><tr> <th>1</th> <th>2</th> <th>3</th></tr><tr align="center"> <!-- 设置表格的第1行所有数据居中 --> <!-- 左右合并用colspan，将表格的第1行的第1列和第2列合并， --> <td colspan="2">1-1-2</td> <td>1-3</td></tr><tr> <td>2-1</td> <!-- 上下合并用rowspan，将表格的第2行的第2列和第3行的第2 列进行合并 --> <td rowspan="2" align="center" bgcolor="green">2-3-2</td> <!-- 设置合并的第2列数据居中，背景颜色为绿色--> <td>2-3</td></tr><tr> <td>3-1</td> <td>3-3</td></tr><tr bgcolor="yellow"><!-- 将表格的第4行设置为黄色 --> <td>4-1</td> <td>4-2</td> <td>4-3</td></tr></table></body></html>
复制代码
运行结果：
可以明显第看到距离发生了变化！
5.2 cellspacing 属性设定表格相邻单元格边线之间的距离。（俗称“外间距”）
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><!-- 表格宽度设置为400，背景颜色为红色，表格内容距离格线的距离为20px，相邻单元格边线的距离为20px--><table border="1" width=400 bgcolor="red" cellpadding="20px" cellspacing="20px"><!-- <tr>表示一行，<td>表示一列，<th>表示标题行 --><tr> <th>1</th> <th>2</th> <th>3</th></tr><tr align="center"> <!-- 设置表格的第1行所有数据居中 --> <!-- 左右合并用colspan，将表格的第1行的第1列和第2列合并， --> <td colspan="2">1-1-2</td> <td>1-3</td></tr><tr> <td>2-1</td> <!-- 上下合并用rowspan，将表格的第2行的第2列和第3行的第2 列进行合并 --> <td rowspan="2" align="center" bgcolor="green">2-3-2</td> <!-- 设置合并的第2列数据居中，背景颜色为绿色--> <td>2-3</td></tr><tr> <td>3-1</td> <td>3-3</td></tr><tr bgcolor="yellow"><!-- 将表格的第4行设置为黄色 --> <td>4-1</td> <td>4-2</td> <td>4-3</td></tr></table></body></html>
复制代码
运行结果：
表示各边框之间的距离为 20px；
我是【程序员的时光】，热爱技术分享，信仰终身学习，爱健身，会点厨艺的热血青年，我们下期再见！
评论