CSS Table（表格）

首先介绍表格标签

一个完整的表格示例如下

<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>

table标签：表格
tr标签：表格中的每一行
th标签：表格中导航栏的每一项元素
td标签：表格中除导航栏外一行的一项元素

当然如上还是不能显示表格的，还需要设置表格css样式才行，示例如下：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>表格</title><style type="text/css">table,th,td{border: 1px solid black;}</style></head><body><table><tr><th>科目</th><th>分数</th></tr><tr><td>语文</td><td>120</td></tr><tr><td>数学</td><td>120</td></tr><tr><td>英语</td><td>120</td></tr></table></body>
</html>

效果：

标签中的文本会自动加粗居中处理

则一行行往下叠加

style里面声明了table，th，td三个标签共用样式

请注意，在上面的例子中的表格有双边框。这是因为表和th/ td元素有独立的边界。
为了显示一个表的单个边框，使用 border-collapse属性。

折叠边框

<style type="text/css">table{border-collapse: collapse;}table,th,td{border: 1px solid black ;}</style>

效果：

自定义表格宽高

上面表格大小都是自适应大小，如果我们要自定义表格宽高改如何做？通过css

        <style type="text/css">table{border-collapse: collapse;width: 100%;}table,th,td{border: 1px solid black ;}th,td{height: 50px;}</style>

效果：

这里可以看到width: 100%;是占满屏幕，th,td 设置每一行的高度

表格文字对齐

表格中的文本对齐和垂直对齐属性。
text-align属性设置水平对齐方式，像左，右，或中心：

<style type="text/css">table{border-collapse: collapse;width: 100%;}table,th,td{border: 1px solid black ;}th,td{height: 50px;text-align: center;}</style>

效果：

垂直对齐：vertical-align

    <style type="text/css">table{border-collapse: collapse;width: 100%;}table,th,td{border: 1px solid black ;}th,td{height: 50px;text-align: center;vertical-align: bottom;}</style>

效果：

添加表格标题

    <table><caption>成绩表</caption><tr><th>科目</th><th>分数</th></tr><tr><td>语文</td><td>120</td></tr><tr><td>数学</td><td>120</td></tr><tr><td>英语</td><td>120</td></tr></table>

默认添加在上面居中，标题位置可以在css中控制

如下：

    <style type="text/css">table{border-collapse: collapse;width: 100%;}table,th,td{border: 1px solid black ;}th,td{height: 50px;text-align: center;vertical-align: middle;}caption{caption-side: bottom;color: red;}</style>

效果：

制作一个个性表格

以此为例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>表格</title><style type="text/css">table{border-collapse: collapse;}th{background-color: rgb(128, 102, 160);color: white;font-weight:bold ;}td{color: black;}tr,th{border-width: 1px;border-style: solid;border-color: rgb(128, 102, 160);}</style></head><body><table><tr><th>Name</th><th>City</th><th>Phone</th></tr><tr><td>Albert Ellis</td><td>New York</td><td>+1 718 000000</td></tr><tr><td>Marcus Aurelius</td><td>Rome</td><td>+1 718 000000</td></tr><tr><td>Epictetus</td><td>Greece</td><td>+1 718 000000</td></tr><tr><td>Aristotle</td><td>Greece</td><td>+1 718 000000</td></tr></table></body>
</html>

实现效果：

CSS Table（表格）相关推荐

css table表格相关设置和属性
css table表格相关设置和属性文章目录 css table表格相关设置和属性前言一.表格结构二.使用行内样式控制表格样式 1.属性 2.使用css控制表格的样式前言记录表格的结构,属 ...
HTML表格css样式菜鸟教程,CSS Table(表格)
CSS 表格使用CSS可以大大提高HTML表格的外观. Company Contact Country Alfreds Futterkiste Maria Anders Germany Berglu ...
css怎么设置table表格的边框为单线边框？（代码详解）
table表格边框怎么设置为单线边框?本篇文章就给大家介绍一种css设置table表格的边框为单线边框的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 首先我们来看看给tabl ...
css单线边框_css怎么设置table表格的边框为单线边框？（代码详解）
table表格边框怎么设置为单线边框?本篇文章就给大家介绍一种css设置table表格的边框为单线边框的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 首先我们来看看给tabl ...
element table滚动条占宽度_HTML table表格固定表头 tbody加滚动条
纯CSS table表格 thead固定 tbody滚动效果由于项目需要,在表格中,当数据量越来越多时,就会出现滚动条,而在滚动的过程中,默认情况下表格头部会跟着表格内容一起滚动,导致看不到头部对应 ...
HTML table表格固定表头 tbody加滚动条
纯CSS table表格 thead固定 tbody滚动效果由于项目需要,在表格中,当数据量越来越多时,就会出现滚动条,而在滚动的过程中,默认情况下表格头部会跟着表格内容一起滚动,导致看不到头部对应 ...
html 滚动条_HTML table表格固定表头 tbody加滚动条
纯CSS table表格 thead固定 tbody滚动效果由于项目需要,在表格中,当数据量越来越多时,就会出现滚动条,而在滚动的过程中,默认情况下表格头部会跟着表格内容一起滚动,导致看不到头部对应 ...
iframe 滚动条不显示_HTML table表格固定表头 tbody加滚动条
纯CSS table表格 thead固定 tbody滚动效果由于项目需要,在表格中,当数据量越来越多时,就会出现滚动条,而在滚动的过程中,默认情况下表格头部会跟着表格内容一起滚动,导致看不到头部对应 ...
在PHP中给表格加上css样式,表格CSS样式设置给table表格设置CSS样式表
表格table tr td CSS花色设置给table表格设置CSS花式表在一个网页中多处运用了表格table标签,这个时候给指定的表格对象设置装备摆设款式仿照照旧概略经由CSS发展管束配置. 着 ...
html表格美化代码,分享：记录一次使用纯CSS美化table表格的代码
今天准备美化下作的一个小页面的样式,这个页面就是一个表格,调取报名信息的,例如「姓名」「联系方式」「时间」,就单独一个页面,不想再使用复杂的插件来实践,就准备用纯CSS来定一下样式. 检索了下,在「蝈 ...

CSS Table（表格）

首先介绍表格标签

CSS Table（表格）相关推荐

最新文章

热门文章