<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格</title>
<style>
/* 标签选择器 元素选择器 */
table{
border: 1px solid #666;
/* 合并边框 */
border-collapse: collapse;
width: 400px;
}
th,td{
border: 1px solid #666;
}
</style>
</head>
<body>
<!-- table是块级元素 -->
<!--html注释-->
<!--
border--表格的边框属性
align--表格的对齐方式 left center right
width--表格的宽度 height
cellpadding--表示单元格和内容的距离
cellspacing--表示单元格和单元格之间的距离
bgcolor--表示表格的背景色
-->
<!--
学完css之后就不要使用这些属性了
border="1px" bgcolor="cyan" align="left" width="400px" cellpadding="0" cellspacing="0px" -->
<table>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
<tr>
<td>444</td>
<td>555</td>
<td>666</td>
</tr>
<tr>
<td>777</td>
<td>888</td>
<td>999</td>
</tr>
</table>
<br>
<!-- -->
<table>
<!-- 表头 -->
<!-- th一般用于表头单元格 默认有居中加粗效果 -->
<!-- caption表示表格标题标签 -->
<caption align="right">学生信息表</caption>
<!-- colgroup列分组 column 表示列-->
<colgroup>
<col style="background-color: aqua;">
<col span="2" style="background-color: blue;">
</colgroup>
<thead>
<tr>
<th>姓名</th>
<th>学号</th>
<th>班级</th>
</tr>
</thead>
<!--表体 -->
<tbody>
<tr>
<td>姓名</td>
<td>学号</td>
<td>班级</td>
</tr>
</tbody>
<!-- 表脚 -->
<tfoot>
<tr>
<td>姓名</td>
<td>学号</td>
<td>班级</td>
</tr>
</tfoot>
</table>
</body>
</html>