概述
html中提供了一个table表格的东西，不过到现在来说，用处基本上不是很大，但有些报表的项目中还是会用到的。此内容可以稍微一带而过，用到的时候，再回来复习也不迟。表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
基本语法
- thead：定义表格头部
- tbody：定义表格主体
- tfoot：定义表格尾部
- tr：定义定义行
- td：定义列 每一格数据
- th：定义标题单元格，大多数浏览器会把表头显示为粗体居中的文本
tip：1.如果在table下直接定义tr，结构自动会补全tbody，像thead这些标签可以不写，浏览器会自动帮我们补全
2.table没有写宽度，则由内容撑开
3.如果当前列某一个宽度变化 整列都发生变化
4.如果当前行某一个高度发生变化，则整行都发生变化
5.margin无法实现表格的单元格直接的间隔table中常用的属性
border：定义表格边线，表格默认是没有边线的。
colspan：单元格占多少列（跨列）
rowspan：单元格占多少行（跨行）
border-collapse: collapse; 当设置border="1"的时候，默认单元格都会有一条边线，使用这个样式可以避免这种情况
tip：在table也可以使用css样式表去控制，如果写行内样式，可以省略style。
实例
<!doctype html>
<html>
<head>
<meta charset='utf-8' >
<meta name='keywords' content='关键字，关键词' >
<meta name='description' content='描述信息' >
<title>课程表</title>
<link rel='stylesheet' href='css/reset.css'>
<style type="text/css">
.box{
width: 510px;
height: 500px;
margin: 20px auto;
}
.table_text{
font-family: "楷体";
font-size: 22px;
text-align: center;
/* 让表格边线为单条线 */
border-collapse: collapse;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="box">
<table border="1" class="table_text">
<tr>
<td colspan="7">小学生课程信息表</td>
</tr>
<tr>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
<th>星期日</th>
</tr>
<tr>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td rowspan="5">无</td>
<td rowspan="5">无</td>
</tr>
<tr>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
</tr>
<tr>
<td>狗语</td>
<td>狗语</td>
<td>狗语</td>
<td>狗语</td>
<td>狗语</td>
</tr>
<tr>
<td>体育</td>
<td>体育</td>
<td>体育</td>
<td>体育</td>
<td>体育</td>
</tr>
</table>
</div>
</body>
</html>
2441
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
