我们来介绍css入门，我们从基础标签介绍起，现阶段我们看到的网站大部分是div和css可以实现，今天介绍css设置表格背景色和前景色，设置表格边框，设置单元格边距，设置表格标题的位置，隐藏空单元格
1.css设置表格背景色和前景色，默认的表格是没颜色的，这样不方便我们一行行的看数据。这时候我们可以设置css奇数行颜色和偶数行颜色，通过颜色不一致解决这个问题
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
table { /*设置表格的CSS样式*/
background-color: #00CCFF; /*表格的背景颜色*/
color: #FF0000; /*表格的字体颜色*/
}
</style>
</head>
<body>
<h3>表格标签</h3>
<table width="400" border="1">
<tr>
<th>标签</th>
<th>描述</th>
</tr>
<tr>
<td><table></td>
<td>定义表格</td>
</tr>
<tr>
<td><caption></td>
<td>定义表格标题。</td>
</tr>
<tr>
<td><th></td>
<td>定义表格中的表头单元格。</td>
</tr>
<tr>
<td><tr></td>
<td>定义表格中的行。</td>
</tr>
<tr>
<td><td></td>
<td>定义表格中的单元。</td>
</tr>
<tr>
<td><thead></td>
<td>定义表格中的表头内容。</td>
</tr>
<tr>
<td><tbody></td>
<td>定义表格中的主体内容。</td>
</tr>
<tr>
<td><tfoot></td>
<td>定义表格中的表注内容（脚注）。</td>
</tr>
<tr>
<td><col></td>
<td>定义表格中一个或多个列的属性值。</td>
</tr>
<tr>
<td><colgroup></td>
<td>定义表格中供格式化的列组。</td>
</tr>
</table>
</body>
</html>
2.设置表格边框，我们给表格加个颜色的边框
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
table {
border: red solid 2px;/* 表格外框 */
}
th, td {
border: blue solid 1px;/* 单元格边框 */
}
</style>
</head>
<body>
<h3>表格标签</h3>
<table width="400">
<tr>
<th>标签</th>
<th>描述</th>
</tr>
<tr>
<td><table></td>
<td>定义表格</td>
</tr>
<tr>
<td><caption></td>
<td>定义表格标题。</td>
</tr>
<tr>
<td><th></td>
<td>定义表格中的表头单元格。</td>
</tr>
<tr>
<td><tr></td>
<td>定义表格中的行。</td>
</tr>
<tr>
<td><td></td>
<td>定义表格中的单元。</td>
</tr>
<tr>
<td><thead></td>
<td>定义表格中的表头内容。</td>
</tr>
<tr>
<td><tbody></td>
<td>定义表格中的主体内容。</td>
</tr>
<tr>
<td><tfoot></td>
<td>定义表格中的表注内容（脚注）。</td>
</tr>
<tr>
<td><col></td>
<td>定义表格中一个或多个列的属性值。</td>
</tr>
<tr>
<td><colgroup></td>
<td>定义表格中供格式化的列组。</td>
</tr>
</table>
</body>
</html>
demo2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
table {
border: red solid 2px;/* 表格外框 */
border-collapse:collapse;/* 边框重叠*/
}
th, td {
border: blue solid 1px;/* 单元格边框 */
}
</style>
</head>
<body>
<h3>表格标签</h3>
<table width="400">
<tr>
<th>标签</th>
<th>描述</th>
</tr>
<tr>
<td><table></td>
<td>定义表格</td>
</tr>
<tr>
<td><caption></td>
<td>定义表格标题。</td>
</tr>
<tr>
<td><th></td>
<td>定义表格中的表头单元格。</td>
</tr>
<tr>
<td><tr></td>
<td>定义表格中的行。</td>
</tr>
<tr>
<td><td></td>
<td>定义表格中的单元。</td>
</tr>
<tr>
<td><thead></td>
<td>定义表格中的表头内容。</td>
</tr>
<tr>
<td><tbody></td>
<td>定义表格中的主体内容。</td>
</tr>
<tr>
<td><tfoot></td>
<td>定义表格中的表注内容（脚注）。</td>
</tr>
<tr>
<td><col></td>
<td>定义表格中一个或多个列的属性值。</td>
</tr>
<tr>
<td><colgroup></td>
<td>定义表格中供格式化的列组。</td>
</tr>
</table>
</body>
</html>
3.设置单元格边距，用到padding属性和margin
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
table {
border-collapse:collapse;/* 边框重叠*/
}
th, td {
border: blue solid 1px;/* 单元格边框 */
padding:5px 10px;
}
</style>
</head>
<body>
<h3>表格标签</h3>
<table width="400">
<tr>
<th>标签</th>
<th>描述</th>
</tr>
<tr>
<td><table></td>
<td>定义表格</td>
</tr>
<tr>
<td><caption></td>
<td>定义表格标题。</td>
</tr>
<tr>
<td><th></td>
<td>定义表格中的表头单元格。</td>
</tr>
<tr>
<td><tr></td>
<td>定义表格中的行。</td>
</tr>
<tr>
<td><td></td>
<td>定义表格中的单元。</td>
</tr>
<tr>
<td><thead></td>
<td>定义表格中的表头内容。</td>
</tr>
<tr>
<td><tbody></td>
<td>定义表格中的主体内容。</td>
</tr>
<tr>
<td><tfoot></td>
<td>定义表格中的表注内容（脚注）。</td>
</tr>
<tr>
<td><col></td>
<td>定义表格中一个或多个列的属性值。</td>
</tr>
<tr>
<td><colgroup></td>
<td>定义表格中供格式化的列组。</td>
</tr>
</table>
</body>
</html>
demo2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
table {
border: red solid 2px;/* 表格外框 */
border-spacing:5px 10px;
}
th, td {
border: blue solid 1px;/* 单元格边框 */
}
</style>
</head>
<body>
<h3>表格标签</h3>
<table width="400">
<tr>
<th>标签</th>
<th>描述</th>
</tr>
<tr>
<td><table></td>
<td>定义表格</td>
</tr>
<tr>
<td><caption></td>
<td>定义表格标题。</td>
</tr>
<tr>
<td><th></td>
<td>定义表格中的表头单元格。</td>
</tr>
<tr>
<td><tr></td>
<td>定义表格中的行。</td>
</tr>
<tr>
<td><td></td>
<td>定义表格中的单元。</td>
</tr>
<tr>
<td><thead></td>
<td>定义表格中的表头内容。</td>
</tr>
<tr>
<td><tbody></td>
<td>定义表格中的主体内容。</td>
</tr>
<tr>
<td><tfoot></td>
<td>定义表格中的表注内容（脚注）。</td>
</tr>
<tr>
<td><col></td>
<td>定义表格中一个或多个列的属性值。</td>
</tr>
<tr>
<td><colgroup></td>
<td>定义表格中供格式化的列组。</td>
</tr>
</table>
</body>
</html>
4.设置表格标题的位置
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
table {
border: red solid 2px;/* 表格外框 */
border-collapse: collapse;/* 边框重叠*/
}
caption {
padding: 6px;
font-size: 24px;
color: red;
caption-side: bottom;
}
th, td {
border: blue solid 1px;/* 单元格边框 */
}
</style>
</head>
<body>
<table width="400">
<caption>
表格标签
</caption>
<tr>
<th>标签</th>
<th>描述</th>
</tr>
<tr>
<td><table></td>
<td>定义表格</td>
</tr>
<tr>
<td><caption></td>
<td>定义表格标题。</td>
</tr>
<tr>
<td><th></td>
<td>定义表格中的表头单元格。</td>
</tr>
<tr>
<td><tr></td>
<td>定义表格中的行。</td>
</tr>
<tr>
<td><td></td>
<td>定义表格中的单元。</td>
</tr>
<tr>
<td><thead></td>
<td>定义表格中的表头内容。</td>
</tr>
<tr>
<td><tbody></td>
<td>定义表格中的主体内容。</td>
</tr>
<tr>
<td><tfoot></td>
<td>定义表格中的表注内容（脚注）。</td>
</tr>
<tr>
<td><col></td>
<td>定义表格中一个或多个列的属性值。</td>
</tr>
<tr>
<td><colgroup></td>
<td>定义表格中供格式化的列组。</td>
</tr>
</table>
</body>
</html>
demo2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
table {
border: red solid 2px;/* 表格外框 */
border-collapse: collapse;/* 边框重叠*/
caption-side: bottom;
}
caption {
padding: 6px;
font-size: 24px;
color: red;
}
th, td {
border: blue solid 1px;/* 单元格边框 */
}
</style>
</head>
<body>
<table width="400">
<caption>
表格标签
</caption>
<tr>
<th>标签</th>
<th>描述</th>
</tr>
<tr>
<td><table></td>
<td>定义表格</td>
</tr>
<tr>
<td><caption></td>
<td>定义表格标题。</td>
</tr>
<tr>
<td><th></td>
<td>定义表格中的表头单元格。</td>
</tr>
<tr>
<td><tr></td>
<td>定义表格中的行。</td>
</tr>
<tr>
<td><td></td>
<td>定义表格中的单元。</td>
</tr>
<tr>
<td><thead></td>
<td>定义表格中的表头内容。</td>
</tr>
<tr>
<td><tbody></td>
<td>定义表格中的主体内容。</td>
</tr>
<tr>
<td><tfoot></td>
<td>定义表格中的表注内容（脚注）。</td>
</tr>
<tr>
<td><col></td>
<td>定义表格中一个或多个列的属性值。</td>
</tr>
<tr>
<td><colgroup></td>
<td>定义表格中供格式化的列组。</td>
</tr>
</table>
</body>
</html>
5.隐藏空单元格
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
table {
border: red solid 2px;/* 表格外框 */
empty-cells:hide;
border-spacing:5px;
}
caption {
padding: 6px;
font-size: 24px;
color: red;
}
th, td {
border: blue solid 1px;/* 单元格边框 */
}
</style>
</head>
<body>
<table width="400">
<caption>
表格标签
</caption>
<tr>
<th>标签</th>
<th>描述</th>
</tr>
<tr>
<td><table></td>
<td>定义表格</td>
</tr>
<tr>
<td><caption></td>
<td>定义表格标题。</td>
</tr>
<tr>
<td><th></td>
<td>定义表格中的表头单元格。</td>
</tr>
<tr>
<td><tr></td>
<td>定义表格中的行。</td>
</tr>
<tr>
<td><td></td>
<td>定义表格中的单元。</td>
</tr>
<tr>
<td><thead></td>
<td>定义表格中的表头内容。</td>
</tr>
<tr>
<td><tbody></td>
<td>定义表格中的主体内容。</td>
</tr>
<tr>
<td><tfoot></td>
<td>定义表格中的表注内容（脚注）。</td>
</tr>
<tr>
<td><col></td>
<td>定义表格中一个或多个列的属性值。</td>
</tr>
<tr>
<td><colgroup></td>
<td>定义表格中供格式化的列组。</td>
</tr>
<tr>
<td></td>
<td align="right"><a href="#">更多标签</a></td>
</tr>
</table>
</body>
</html>
