表格基本结构
表格其实就是很多的小单元格,而这些小单元格很有次序的排列着,它们有很多行,很多列。这些很多行列组成的东西,就叫表格,表格是<table>标签来定义的。而<table>标签中的行就是<tr>标签,而列就是<td>标签,必须先定义行才能定义列。因为html中,每一列是在一行当中的。
表格描述<table>定义表格<caption>定义表格标题<th>定义表格的表头<tr>定义表格的行<td>定义表格的单元<thead>定义表格的页眉<tbody>定义表格的主体<tfoot>定义表格的页脚<col>定义表格的列属性
基本表格用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>企业员工通讯录</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="20" width="1000">
<caption>企业员工通讯录</caption>
<tr>
<th>姓名</th>
<th>电话</th>
<th>电子邮箱</th>
<th>职务</th>
</tr>
<tr align="center">
<td>张三</td>
<td>18278305487</td>
<td>zhang@qq.com</td>
<td>研发工程师</td>
</tr>
<tr align="center">
<td>王二</td>
<td rowspan="2">12356843687</td>
<td>wang@qq.com</td>
<td>研发经理</td>
</tr>
<tr align="center">
<td>李四</td>
<td>li@qq.com</td>
<td>研发工程师</td>
</tr>
<tr align="center">
<td colspan="2">李四</td>
<td>li@qq.com</td>
<td>研发工程师</td>
</tr>
</table>
</body>
</html>
效果如下图
表格属性