1.表格①：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
在日常生活中经常使用表格来表示一些格式化的数据：
比如：课程表、账单、人名单
同样在网页中也可以来创建表格，来表示格式化的数据
我们使用table标签来创建表格
-->
<table border="1">
<!--在table中使用tr来代表表格中的一行，有几行就有几个tr-->
<tr>
<!--在tr中使用td代表一行中的一个单元格，有几个单元格就有几个td-->
<td>A1</td>
<td>A2</td>
<td>A3</td>
<td>A4</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
<!--
rowspan表示纵向合并单元格
-->
<td rowspan="2">B4</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
</tr>
<tr>
<td>D1</td>
<td>D2</td>
<!--
colspan表示横向的合并单元格
-->
<td colspan="2">D3</td>
</tr>
</table>
</body>
</html>
2.表格②：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table{
width: 500px;
margin: 0 auto;
/*设置边框*/
/*border: 1px black solid;*/
/*
border-spacing可以用来设置表格边框之间的距离
* */
/*border-spacing: 100px;*/
/*
border-collapse可以用来设置表格的边框合并
当设置border-collapse以后border-spacing自动失效
* */
border-collapse: collapse;
}
td , th{
border: 1px black solid;
}
table tr{
background-color: yellowgreen;
}
</style>
</head>
<body>
<!--
table是一个块元素
-->
<table>
<!--
我们在创建一个表格时，如果没有指定tbody，则浏览器会在页面中自动添加tbody，并且将所有的tr都放到tbody中
一定要注意，默认情况下tr是tbody的子元素，而不是table的子元素
-->
<tr>
<!--
th标签专门用来表示表头中的单元格的，
所以在表头中可以使用th来替换td
-->
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>1</td>
<td>孙悟空</td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>猪八戒</td>
<td>28</td>
<td>男</td>
</tr>
<tr>
<td>3</td>
<td>沙和尚</td>
<td>38</td>
<td>男</td>
</tr>
</table>
</body>
</html>
3.表格③：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table {
width: 500px;
margin: 0 auto;
/*设置边框*/
/*border: 1px black solid;*/
/*
border-spacing可以用来设置表格边框之间的距离
* */
/*border-spacing: 100px;*/
/*
border-collapse可以用来设置表格的边框合并
当设置border-collapse以后border-spacing自动失效
* */
border-collapse: collapse;
}
td,
th {
border: 1px black solid;
}
</style>
</head>
<body>
<!--
table是一个块元素
-->
<table>
<!--
在我们的HTML中还为我们提供了 thead tbody tfoot 来将表格分成三个部分
thead 表示表格的头部，可以将头部的tr放到thead中，thead中的内容，永远会显示在表格的头部
tfoot 表示表格的底部，可以将底部的tr放到tfoot中 tfoot中的内容，永远会显示在表格的底部
tbody 表示表格的主体，可以将主体内容的tr放到tbody中
-->
<thead>
<tr>
<th>日期</th>
<th>收入</th>
<th>支出</th>
<th>合计</th>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
<td></td>
<td>合计</td>
<td>500</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>2017.1.4</td>
<td>500</td>
<td>400</td>
<td>100</td>
</tr>
<tr>
<td>2017.1.4</td>
<td>500</td>
<td>400</td>
<td>100</td>
</tr>
<tr>
<td>2017.1.4</td>
<td>500</td>
<td>400</td>
<td>100</td>
</tr>
<tr>
<td>2017.1.4</td>
<td>500</td>
<td>400</td>
<td>100</td>
</tr>
<tr>
<td>2017.1.4</td>
<td>500</td>
<td>400</td>
<td>100</td>
</tr>
<tr>
<td>2017.1.4</td>
<td>500</td>
<td>400</td>
<td>100</td>
</tr>
<tr>
<td>2017.1.4</td>
<td>500</td>
<td>400</td>
<td>100</td>
</tr>
<tr>
<td>2017.1.4</td>
<td>500</td>
<td>400</td>
<td>100</td>
</tr>
<tr>
<td>2017.1.4</td>
<td>500</td>
<td>400</td>
<td>100</td>
</tr>
<tr>
<td>2017.1.4</td>
<td>500</td>
<td>400</td>
<td>100</td>
</tr>
<tr>
<td>2017.1.4</td>
<td>500</td>
<td>400</td>
<td>100</td>
</tr>
<tr>
<td>2017.1.4</td>
<td>500</td>
<td>400</td>
<td>100</td>
</tr>
<tr>
<td>2017.1.4</td>
<td>500</td>
<td>400</td>
<td>100</td>
</tr>
<tr>
<td>2017.1.4</td>
<td>500</td>
<td>400</td>
<td>100</td>
</tr>
<tr>
<td>2017.1.4</td>
<td>500</td>
<td>400</td>
<td>100</td>
</tr>
<tr>
<td>2017.1.4</td>
<td>500</td>
<td>400</td>
<td>100</td>
</tr>
<tr>
<td>2017.1.4</td>
<td>500</td>
<td>400</td>
<td>100</td>
</tr>
<tr>
<td>2017.1.4</td>
<td>500</td>
<td>400</td>
<td>100</td>
</tr>
<tr>
<td>2017.1.4</td>
<td>500</td>
<td>400</td>
<td>100</td>
</tr>
<tr>
<td>2017.1.4</td>
<td>500</td>
<td>400</td>
<td>100</td>
</tr>
<tr>
<td>2017.1.4</td>
<td>500</td>
<td>400</td>
<td>100</td>
</tr>
<tr>
<td>2017.1.4</td>
<td>500</td>
<td>400</td>
<td>100</td>
</tr>
<tr>
<td>2017.1.4</td>
<td>500</td>
<td>400</td>
<td>100</td>
</tr>
<tr>
<td>2017.1.4</td>
<td>500</td>
<td>400</td>
<td>100</td>
</tr>
<tr>
<td>2017.1.4</td>
<td>500</td>
<td>400</td>
<td>100</td>
</tr>
<tr>
<td>2017.1.4</td>
<td>500</td>
<td>400</td>
<td>100</td>
</tr>
<tr>
<td>2017.1.4</td>
<td>500</td>
<td>400</td>
<td>100</td>
</tr>
<tr>
<td>2017.1.4</td>
<td>500</td>
<td>400</td>
<td>100</td>
</tr>
<tr>
<td>2017.1.4</td>
<td>500</td>
<td>400</td>
<td>100</td>
</tr>
<tr>
<td>2017.1.4</td>
<td>500</td>
<td>400</td>
<td>100</td>
</tr>
<tr>
<td>2017.1.4</td>
<td>500</td>
<td>400</td>
<td>100</td>
</tr>
<tr>
<td>2017.1.4</td>
<td>500</td>
<td>400</td>
<td>100</td>
</tr>
<tr>
<td>2017.1.4</td>
<td>500</td>
<td>400</td>
<td>100</td>
</tr>
<tr>
<td>2017.1.4</td>
<td>500</td>
<td>400</td>
<td>100</td>
</tr>
<tr>
<td>2017.1.4</td>
<td>500</td>
<td>400</td>
<td>100</td>
</tr>
<tr>
<td>2017.1.4</td>
<td>500</td>
<td>400</td>
<td>100</td>
</tr>
<tr>
<td>2017.1.4</td>
<td>500</td>
<td>400</td>
<td>100</td>
</tr>
<tr>
<td>2017.1.4</td>
<td>500</td>
<td>400</td>
<td>100</td>
</tr>
<tr>
<td>2017.1.4</td>
<td>500</td>
<td>400</td>
<td>100</td>
</tr>
<tr>
<td>2017.1.4</td>
<td>500</td>
<td>400</td>
<td>100</td>
</tr>
<tr>
<td>2017.1.4</td>
<td>500</td>
<td>400</td>
<td>100</td>
</tr>
<tr>
<td>2017.1.4</td>
<td>500</td>
<td>400</td>
<td>100</td>
</tr>
<tr>
<td>2017.1.4</td>
<td>500</td>
<td>400</td>
<td>100</td>
</tr>
<tr>
<td>2017.1.4</td>
<td>500</td>
<td>400</td>
<td>100</td>
</tr>
<tr>
<td>2017.1.4</td>
<td>500</td>
<td>400</td>
<td>100</td>
</tr>
<tr>
<td>2017.1.4</td>
<td>500</td>
<td>400</td>
<td>100</td>
</tr>
<tr>
<td>2017.1.4</td>
<td>500</td>
<td>400</td>
<td>100</td>
</tr>
<tr>
<td>2017.1.4</td>
<td>500</td>
<td>400</td>
<td>100</td>
</tr>
<tr>
<td>2017.1.4</td>
<td>500</td>
<td>400</td>
<td>100</td>
</tr>
<tr>
<td>2017.1.4</td>
<td>500</td>
<td>400</td>
<td>100</td>
</tr>
<tr>
<td>2017.1.4</td>
<td>500</td>
<td>400</td>
<td>100</td>
</tr>
<tr>
<td>2017.1.4</td>
<td>500</td>
<td>400</td>
<td>100</td>
</tr>
<tr>
<td>2017.1.4</td>
<td>500</td>
<td>400</td>
<td>100</td>
</tr>
<tr>
<td>2017.1.4</td>
<td>500</td>
<td>400</td>
<td>100</td>
</tr>
</tbody>
</table>
</body>
</html>
2441
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
