2、简单表格
2018-07-18 本文已影响0人
啊啊啊海
表格就是大家平时看到的二维表，比如Excel表之类的
表格：分为表头、表身、表脚 三部分。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
<style type="text/css">
td{
text-align: center; /*表格居中*/
}
</style>
</head>
<body>
<table border="1" style="border-collapse:collapse;width:200px"> <!--合并表格边框-->
/*
collapse 边框合并，如果相邻的话，共用一个框
separate 默认值，边框分开，不合并
*/
<caption>我是表头</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>啊海</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>啊兰</td>
<td>女</td>
<td>18</td>
</tr>
<tr>
<td>小白</td>
<td>女</td>
<td>18</td>
</tr>
</tbody>
</table>
</body>
</html>
效果预览
image.png
合并行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
<style type="text/css">
td{
text-align: center; /*表格居中*/
}
</style>
</head>
<body>
<table border="1" style="border-collapse:collapse;width:200px"> <!--合并表格边框-->
<caption>我是表头</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>啊海</td>
<td>男</td>
<td rowspan="4">18</td>
</tr>
<tr>
<td>啊兰</td>
<td>女</td>
<!-- <td>18</td> -->
</tr>
<tr>
<td>小白</td>
<td>女</td>
<!-- <td>18</td> -->
</tr>
</tbody>
</table>
<!--
rowspan 合并行
colspan 合并列
-->
</body>
</html>
效果预览
image.png
