Web之旅—— HTML之table（8）
2017-09-15 本文已影响38人
葉糖糖
表格通过行、列可以展示数据，可以帮助开发者进行页面布局。那么一张网页上的表格是怎么构成的？你知道么？
一、指码为路
这是一张简单的网页，其中编写了一个简单的table的使用方法。最简单的表格可以通过
table、tr、td标签构成。
关于表格的内容是比较简单的，遇到不懂的属性看看资料理解一下，写写一写基本上就能解决问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格元素演示</title>
<style type="text/css">
table{
border-right: 1px solid black;
border-bottom: 1px solid black;
}
td,th{
border-left: solid 1px black;
border-top:solid 1px black;
}
</style>
</head>
<body>
<table cellpadding="0" border="0" cellspacing="0">
<!--表格标题-->
<caption>2017开普勒大学新生入学信息表</caption>
<!--表头字段-->
<thead>
<tr>
<th>序列</th>
<th>姓名</th>
<th>年龄</th>
<th>专业</th>
<th>备注</th>
</tr>
</thead>
<!--表体内容-->
<tbody>
<tr>
<td>1</td>
<td>sugarYe</td>
<td>10</td>
<td>古典中文</td>
<td>兼职写代码</td>
</tr>
<tr>
<td>2</td>
<td>洛书</td>
<td>12</td>
<td>中文</td>
<td>博士在读</td>
</tr>
<tr>
<td>3</td>
<td>Tina</td>
<td>15</td>
<td>计算机信息管理</td>
<td>天才程序员</td>
</tr>
</tbody>
<!--表尾-->
<tfoot>
<tr>
<th>意见</th>
<th colspan="4">厉害了！同意入学！</th>
</tr>
</tfoot>
</table>
</body>
</html>
二、实际效果
上面代码最终的运行效果如下图：
表格效果演示
怎么样，是不是特别简单？加油小伙伴们！
