返回顶部下载帮助
网站模板
模板颜色分类:
当前位置: div+css >

css设置表格背景色和前景色

2020-04-29 文章标签: css 教程 浏览次数:

我们来介绍css入门,我们从基础标签介绍起,现阶段我们看到的网站大部分是div和css可以实现,今天介绍css设置表格背景色和前景色,设置表格边框,设置单元格边距,设置表格标题的位置,隐藏空单元格

css教程

1.css设置表格背景色和前景色,默认的表格是没颜色的,这样不方便我们一行行的看数据。这时候我们可以设置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>


建站咨询 - 联系我们 - 广告服务 - 友情链接 - 版权声明 - 手机版

免责声明:站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!版权归原创者所有,如果侵犯了您的权益,请通知我们,我们会及时删除侵权内容。