概述
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>