<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>表格元素</title>
</head>
<body>
<table border="1"> <!--设置带框框-->
<tr> <!--表格的第一行-->
<td>小明</td> <!--第一行的第一个单元格-->
<td>boy</td> <!--第一行的第二个单元格-->
<td>未婚</td> <!--第一行的第三个单元格-->
</tr>
<tr> <!--表格的第二行-->
<td>小王</td> <!--第二行的第一个单元格-->
<td>girl</td> <!--第二行的第二个单元格-->
<td>已婚</td> <!--第二行的第三个单元格-->
</tr>
</table>
<br><br>
<table border="1"style="width:300px;">
<tr>
<th>姓名</th> <!--表头table header-->
<th>性别</th>
<th>婚否</th>
</tr>
<tr> <!--表格的第一行-->
<td>小明</td> <!--第一行的第一个单元格-->
<td>boy</td> <!--第一行的第二个单元格-->
<td>未婚</td> <!--第一行的第三个单元格-->
</tr>
<tr> <!--表格的第二行-->
<td>小王</td> <!--第二行的第一个单元格-->
<td>girl</td> <!--第二行的第二个单元格-->
<td>已婚</td> <!--第二行的第三个单元格-->
</tr>
</table>
<br><br>
<tableborder="1"style="width:300px;">
<tr>
<th>姓名</th> <!--表头table header-->
<th>性别</th>
<th>婚否</th>
</tr>
<tr> <!--表格的第一行-->
<td>小明</td> <!--第一行的第一个单元格-->
<td>boy</td> <!--第一行的第二个单元格-->
<td>未婚</td> <!--第一行的第三个单元格-->
</tr>
<tr> <!--表格的第二行-->
<td>小王</td> <!--第二行的第一个单元格-->
<td>girl</td> <!--第二行的第二个单元格-->
<td>已婚</td> <!--第二行的第三个单元格-->
</tr>
<tr>
<tdcolspan="3">统计：共两人</td>
<!--<td></td> -->
<!--<td></td> -->
</tr>
</table>
<br><br>
<tableborder="1"style="width:300px;">
<tr>
<th rowspan="4">基本情况</th><!--有四列：默认的第一列内容为基本情况-->
<th>姓名</th> <!--表头table header-->
<th>性别</th>
<th>婚否</th>
</tr>
<tr> <!--表格的第一行-->
<td>小明</td> <!--第一行的第一个单元格-->
<td>boy</td> <!--第一行的第二个单元格-->
<td>未婚</td> <!--第一行的第三个单元格-->
</tr>
<tr> <!--表格的第二行-->
<td>小王</td> <!--第二行的第一个单元格-->
<td>girl</td> <!--第二行的第二个单元格-->
<td>已婚</td> <!--第二行的第三个单元格-->
</tr>
<tr>
<tdcolspan="3">统计：共两人</td>
<!--<td></td> -->
<!--<td></td> -->
</tr>
</table>
<br><br>
<tableborder="1"style="width:300px;">
<caption>这是一个表格</caption> <!--表格的标题部分-->
<tfoot> <!--声明此处的包围空间内容是表尾-->
<tr>
<tdcolspan="3">统计：共两人</td>
<!--<td></td> -->
<!--<td></td> -->
</tr>
</tfoot>
<tr> <!--表格的第一行-->
<td>小明</td> <!--第一行的第一个单元格-->
<td>boy</td> <!--第一行的第二个单元格-->
<td>未婚</td> <!--第一行的第三个单元格-->
</tr>
<trstyle="background:yellow;"> <!--表格的第二行内容,把这一行的内容背景设置为黄色-->
<td>小王</td> <!--第二行的第一个单元格-->
<td>girl</td> <!--第二行的第二个单元格-->
<td>已婚</td> <!--第二行的第三个单元格-->
</tr>
<thead> <!--声明此处的包围空间是表头-->
<tr>
<th>姓名</th> <!--表头table header-->
<th>性别</th>
<th>婚否</th>
</tr>
</thead>
</table>
<br><br>
<!-- 设置列的方法 -->
<tableborder="1"style="width:300px;">
<!-- 默认的光标开始位置是第一列，此时1 代表将第一列标记为red-->
<colgroupstyle="background:red;" span="1"></colgroup>
<!-- 此时，因为第一列已经设置，光标自动切换到第二列，此时1 代表将第二列标记为yellow -->
<colgroupstyle="background:yellow;" span="1"></colgroup>
<tr>
<th>姓名</th> <!--表头table header-->
<th>性别</th>
<th>婚否</th>
</tr>
<tr> <!--表格的第一行-->
<td>小明</td> <!--第一行的第一个单元格-->
<td>boy</td> <!--第一行的第二个单元格-->
<td>未婚</td> <!--第一行的第三个单元格-->
</tr>
<tr> <!--表格的第二行-->
<td>小王</td> <!--第二行的第一个单元格-->
<td>girl</td> <!--第二行的第二个单元格-->
<td>已婚</td> <!--第二行的第三个单元格-->
</tr>
</table>
<br><br>
<table border="1"style="width:300px;">
<colgroup>
<!-- 刚开始光标默认指向的是第一列，此时第一列被标记为红色 -->
<colstyle="background:red;"></col>>
</colgroup>>
<tr>
<th>姓名</th> <!--表头table header-->
<th>性别</th>
<th>婚否</th>
</tr>
<tr> <!--表格的第一行-->
<td>小明</td> <!--第一行的第一个单元格-->
<td>boy</td> <!--第一行的第二个单元格-->
<td>未婚</td> <!--第一行的第三个单元格-->
</tr>
<tr> <!--表格的第二行-->
<td>小王</td> <!--第二行的第一个单元格-->
<td>girl</td> <!--第二行的第二个单元格-->
<td>已婚</td> <!--第二行的第三个单元格-->
</tr>
</table>
<br><br>
<tableborder="1"style="width:300px;">
<colgroup>
<!-- 刚开始光标默认指向的是第一列-->
<col> <!--占位符，将光标的第一列占着，此时如果再有背景设置就会指向第二列-->
<colstyle="background:red;"></col>>
</colgroup>>
<tr>
<th>姓名</th> <!--表头table header-->
<th>性别</th>
<th>婚否</th>
</tr>
<tr> <!--表格的第一行-->
<td>小明</td> <!--第一行的第一个单元格-->
<td>boy</td> <!--第一行的第二个单元格-->
<td>未婚</td> <!--第一行的第三个单元格-->
</tr>
<tr> <!--表格的第二行-->
<td>小王</td> <!--第二行的第一个单元格-->
<td>girl</td> <!--第二行的第二个单元格-->
<td>已婚</td> <!--第二行的第三个单元格-->
</tr>
</table>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
