文章目录
基础表格
html
<table>
<caption>我是表格的标题</caption>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>女</td>
</tr>
</tbody>
</table>标签介绍
-
table:表示一个表格的开始和结尾，所有表格的内容全部被嵌套在 table元素中，必须
-
tr:表示一行，被table嵌套，内部嵌套td，必须
-
td:表示一列，被tr嵌套，必须
-
thead:不是必须，多嵌套表头，也就是表格的第一行 一般搭配css使用
-
th:效果同td，只不过内部文本自动居中加粗
-
tbody:一般嵌套表格的主体部分，不是必须，多搭配css使用
-
caption:用来设置表格标题，不是必须
注意：table、tr、td以上三个元素在表格中缺一不可 横行竖列
运行效果
默认无边框 通过<table border="1"> </table> 设置边框
背景色
bgcolor: 颜色
在html中设置颜色时可以使用以下三种方式
- 直接使用颜色的单词
- 色号 #FFFFFF - #000000
- 使用IDE工具提供的选色工具
- 使用rgb三原色设置
html
<tr bgcolor="coral">
<th>列1</th>
</tr>水平对齐
align:水平对齐单元格内部的内容 right left center注意默认是局左对齐
html
<td align="right">列1</td>垂直对齐
valign:垂直对齐 top bottom middle
html
<td valign="top">列1</td>
<td valign="middle">列2</td>
<td valign="bottom">列3</td>合并单元格
在表格中一行多少列是固定不变的如果需要进行单元格的增减，则可以使用合并单元格的形式
不能随意少写或者不写单元格 colspan="合并单元格的个数"
html
<td colspan="5">列1</td>表格嵌套
在一个表格中可以再次嵌套一个表格，但是注意，被嵌套的表格必须放置在td中
html
<td>
<table bgcolor="greenyellow" cellspacing="0"
border="1px" width="100%" height="100%" bordercolor="red">
<tr>
<td>内部列1</td>
<td>内部列2</td>
<td>内部列3</td>
</tr>
<tr>
<td>内部列1</td>
<td>内部列2</td>
<td>内部列3</td>
</tr>
<tr>
<td>内部列1</td>
<td>内部列2</td>
<td>内部列3</td>
</tr>
</table>
</td>样式预览
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table width="500px" height="400px" border="1px"
cellspacing="0">
<caption>我是表格的标题</caption>
<thead>
<tr bgcolor="coral">
<th>列1</th>
<th>列2</th>
<th>列3</th>
<th>列4</th>
<th>列5</th>
</tr>
</thead>
<tbody>
<tr>
<td align="right">列1</td>
<td align="left">列2</td>
<td align="center">列3</td>
<td>列4</td>
<td>列5</td>
</tr>
<tr>
<td valign="top">列1</td>
<td valign="middle">列2</td>
<td valign="bottom">列3</td>
<td>列4</td>
<td>列5</td>
</tr>
<tr>
<td colspan="5">列1</td>
</tr>
<tr>
<td>列1</td>
<td>列2</td>
<td>
<table bgcolor="greenyellow" cellspacing="0"
border="1px" width="100%" height="100%"
bordercolor="red">
<tr>
<td>内部列1</td>
<td>内部列2</td>
<td>内部列3</td>
</tr>
<tr>
<td>内部列1</td>
<td>内部列2</td>
<td>内部列3</td>
</tr>
<tr>
<td>内部列1</td>
<td>内部列2</td>
<td>内部列3</td>
</tr>
</table>
</td>
<td>列4</td>
<td>列5</td>
</tr>
<tr>
<td>列1</td>
<td>列2</td>
<td>列3</td>
<td>列4</td>
<td>列5</td>
</tr>
<tr>
<td>列1</td>
<td>列2</td>
<td>列3</td>
<td>列4</td>
<td>列5</td>
</tr>
<tr>
<td>列1</td>
<td>列2</td>
<td>列3</td>
<td>列4</td>
<td>列5</td>
</tr>
</tbody>
</table>
</body>
</html>运行效果
