CSS 基础（007_表格）

最新推荐文章于 2024-08-12 16:19:20 发布
最新推荐文章于 2024-08-12 16:19:20 发布
阅读量1.3k 收藏
点赞数
分类专栏： CSS 文章标签： css

原始网址：http://www.w3schools.com/css/css_table.asp

翻译：

CSS Tables

用 CSS 可以使 HTML 表格的外观得到极大改善：
CSS Tables

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <title>CSS Styling Tables</title>
        <meta charset="utf-8">
        <style>
            table#customers {
                font-size: 16px;
                font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
                border-collapse: collapse;
                border-spacing: 0;
                width: 100%;
            }

            #customers td, #customers th {
                border: 1px solid #ddd;
                text-align: left;
                padding: 8px;
            }

            #customers tr:nth-child(even) {
                background-color: #f2f2f2
            }

            #customers th {
                padding-top: 11px;
                padding-bottom: 11px;
                background-color: #4CAF50;
                color: white;
            }
        </style>
    </head>
    <body>
        <table id="customers">
            <tr>
                <th>Company</th>
                <th>Contact</th>
                <th>Country</th>
            </tr>
            <tr>
                <td>Alfreds Futterkiste</td>
                <td>Maria Anders</td>
                <td>Germany</td>
            </tr>
            <tr class="alt">
                <td>Berglunds snabbköp</td>
                <td>Christina Berglund</td>
                <td>Sweden</td>
            </tr>
            <tr>
                <td>Centro comercial Moctezuma</td>
                <td>Francisco Chang</td>
                <td>Mexico</td>
            </tr>
            <tr class="alt">
                <td>Ernst Handel</td>
                <td>Roland Mendel</td>
                <td>Austria</td>
            </tr>
            <tr>
                <td>Island Trading</td>
                <td>Helen Bennett</td>
                <td>UK</td>
            </tr>
            <tr class="alt">
                <td>Königlich Essen</td>
                <td>Philip Cramer</td>
                <td>Germany</td>
            </tr>
            <tr>
                <td>Laughing Bacchus Winecellars</td>
                <td>Yoshi Tannamuri</td>
                <td>Canada</td>
            </tr>
            <tr class="alt">
                <td>Magazzini Alimentari Riuniti</td>
                <td>Giovanni Rovelli</td>
                <td>Italy</td>
            </tr>
        </table>
    </body>
</html>

Table Borders

使用 CSS 的 border 属性可指定表格边框。
下列示例是对 <table>、<th>、<td> 元素指定了黑色边框：
Table Borders

<!DOCTYPE html>
<html>
    <head>
        <style>
            table {
                width: 100%;
            }
            table, th, td {
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <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>
    </body>
</html>

注意：以上示例中的表格是双边框。这是因为表格以及 <th>、<td> 元素拥有各自的独立边框。

Collapse Table Borders

border-collapse 属性用以设置表格边框是否合并（塌陷）为单边框：
Collapse Table Borders

<!DOCTYPE html>
<html>
    <head>
        <style>
            table {
                width: 100%;
                border-collapse: collapse;
            }

            table, td, th {
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <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>
        <p>
            <b>Note:</b> If a !DOCTYPE is not specified, the border-collapse
            property can produce unexpected results in IE8 and earlier versions.
        </p>
    </body>
</html>

Table Width and Height

width 和 height 属性用以定义表格的宽和高。
下列示例设置表格的宽为 100%，设置 <th> 元素的高为 50px：
Table Width and Height

<!DOCTYPE html>
<html>
    <head>
        <style>
            table, td, th {
                border: 1px solid black;
            }

            table {
                border-collapse: collapse;
                width: 100%;
            }

            th {
                height: 50px;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Savings</th>
            </tr>
            <tr>
                <td>Peter</td>
                <td>Griffin</td>
                <td>$100</td>
            </tr>
            <tr>
                <td>Lois</td>
                <td>Griffin</td>
                <td>$150</td>
            </tr>
            <tr>
                <td>Joe</td>
                <td>Swanson</td>
                <td>$300</td>
            </tr>
            <tr>
                <td>Cleveland</td>
                <td>Brown</td>
                <td>$250</td>
            </tr>
        </table>
    </body>
</html>

Horizontal Alignment

text-align 属性用以设置 <th> 或 <td> 中的内容水平对齐（例如，左、右、居中）。
默认情况下，<th> 元素的内容是居中的，<td> 元素的内容是居左的。
下列示例是将 <th> 元素中的文本居左设置：
Horizontal Alignment

<!DOCTYPE html>
<html>
    <head>
        <style>
            table, td, th {
                border: 1px solid black;
            }

            table {
                border-collapse: collapse;
                width: 100%;
            }

            th {
                text-align: left;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Savings</th>
            </tr>
            <tr>
                <td>Peter</td>
                <td>Griffin</td>
                <td>$100</td>
            </tr>
            <tr>
                <td>Lois</td>
                <td>Griffin</td>
                <td>$150</td>
            </tr>
            <tr>
                <td>Joe</td>
                <td>Swanson</td>
                <td>$300</td>
            </tr>
            <tr>
                <td>Cleveland</td>
                <td>Brown</td>
                <td>$250</td>
            </tr>
        </table>
    </body>
</html>

Vertical Alignment

vertical-align 属性用以设置 <th> 或 <td> 中的内容垂直对齐（例如，上、下、居中）。
默认情况下，表格中的内容是垂直居中的（对 <th> 和 <td> 元素而言）。
下列示例是将 <td> 元素中的文本居底设置：
Vertical Alignment

<!DOCTYPE html>
<html>
    <head>
        <style>
            table, td, th {
                border: 1px solid black;
            }

            table {
                border-collapse: collapse;
                width: 100%;
            }

            td {
                height: 50px;
                vertical-align: bottom;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Savings</th>
            </tr>
            <tr>
                <td>Peter</td>
                <td>Griffin</td>
                <td>$100</td>
            </tr>
            <tr>
                <td>Lois</td>
                <td>Griffin</td>
                <td>$150</td>
            </tr>
            <tr>
                <td>Joe</td>
                <td>Swanson</td>
                <td>$300</td>
            </tr>
            <tr>
                <td>Cleveland</td>
                <td>Brown</td>
                <td>$250</td>
            </tr>
        </table>
    </body>
</html>

Table Padding

为了控制表格中边框和内容的空白区域，我们对 <th> 和 <td> 元素使用 padding 属性：
Table Padding

<!DOCTYPE html>
<html>
    <head>
        <style>
            table, td, th {
                border: 1px solid #ddd;
                text-align: left;
            }

            table {
                border-collapse: collapse;
                width: 100%;
            }

            th, td {
                padding: 15px;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Savings</th>
            </tr>
            <tr>
                <td>Peter</td>
                <td>Griffin</td>
                <td>$100</td>
            </tr>
            <tr>
                <td>Lois</td>
                <td>Griffin</td>
                <td>$150</td>
            </tr>
            <tr>
                <td>Joe</td>
                <td>Swanson</td>
                <td>$300</td>
            </tr>
            <tr>
                <td>Cleveland</td>
                <td>Brown</td>
                <td>$250</td>
            </tr>
        </table>
    </body>
</html>

Horizontal Dividers

Horizontal Dividers

<!DOCTYPE html>
<html>
    <head>
        <style>
            table {
                border-collapse: collapse;
                width: 100%;
            }

            th, td {
                padding: 8px;
                text-align: left;
                border-bottom: 1px solid #ddd;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Savings</th>
            </tr>
            <tr>
                <td>Peter</td>
                <td>Griffin</td>
                <td>$100</td>
            </tr>
            <tr>
                <td>Lois</td>
                <td>Griffin</td>
                <td>$150</td>
            </tr>
            <tr>
                <td>Joe</td>
                <td>Swanson</td>
                <td>$300</td>
            </tr>
            <tr>
                <td>Cleveland</td>
                <td>Brown</td>
                <td>$250</td>
            </tr>
        </table>
    </body>
</html>

对 <th> 和 <td> 添加 border-bottom 实现水平分割线：

th, td {
    border-bottom: 1px solid #ddd;
}

Hoverable Table

对 <tr> 使用 :hover 选择器，当鼠标悬浮在当前表格行时，当前行会以高亮显示：
Hoverable Table

<!DOCTYPE html>
<html>
    <head>
        <style>
            table {
                border-collapse: collapse;
                width: 100%;
            }

            th, td {
                padding: 8px;
                text-align: left;
                border-bottom: 1px solid #ddd;
            }

            tr:hover {
                background-color: #f5f5f5
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Points</th>
            </tr>
            <tr>
                <td>Peter</td>
                <td>Griffin</td>
                <td>$100</td>
            </tr>
            <tr>
                <td>Lois</td>
                <td>Griffin</td>
                <td>$150</td>
            </tr>
            <tr>
                <td>Joe</td>
                <td>Swanson</td>
                <td>$300</td>
            </tr>
            <tr>
                <td>Cleveland</td>
                <td>Brown</td>
                <td>$250</td>
            </tr>
        </table>
    </body>
</html>

Striped Tables

Striped Tables

<!DOCTYPE html>
<html>
    <head>
        <style>
            table {
                border-collapse: collapse;
                width: 100%;
                border: 1px solid black;
            }

            th, td {
                text-align: left;
                padding: 8px;
            }

            tr:nth-child(even) {
                background-color: #f2f2f2
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Points</th>
            </tr>
            <tr>
                <td>Peter</td>
                <td>Griffin</td>
                <td>$100</td>
            </tr>
            <tr>
                <td>Lois</td>
                <td>Griffin</td>
                <td>$150</td>
            </tr>
            <tr>
                <td>Joe</td>
                <td>Swanson</td>
                <td>$300</td>
            </tr>
            <tr>
                <td>Cleveland</td>
                <td>Brown</td>
                <td>$250</td>
            </tr>
        </table>
    </body>
</html>

使用 nth-child() 选择器以及对表格的所有偶数（或奇数）行添加 background-color 实现表格的 zebra-striped 效果（斑马线）：

tr:nth-child(even) { background-color: #f2f2f2 }

Table Color

下列示例指定了 <th> 元素的背景色和文本色：
Table Color

<!DOCTYPE html>
<html>
    <head>
        <style>
            table {
                border-collapse: collapse;
                width: 100%;
                border: 1px solid black;
            }

            th, td {
                text-align: left;
                padding: 8px;
            }

            tr:nth-child(even) {
                background-color: #f2f2f2
            }

            th {
                background-color: #4CAF50;
                color: white;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Savings</th>
            </tr>
            <tr>
                <td>Peter</td>
                <td>Griffin</td>
                <td>$100</td>
            </tr>
            <tr>
                <td>Lois</td>
                <td>Griffin</td>
                <td>$150</td>
            </tr>
            <tr>
                <td>Joe</td>
                <td>Swanson</td>
                <td>$300</td>
            </tr>
            <tr>
                <td>Cleveland</td>
                <td>Brown</td>
                <td>$250</td>
            </tr>
        </table>
    </body>
</html>

Responsive Table

在屏幕的尺寸无法完全显示表格内容的情况下，响应式表格将呈现水平滚动条：
Responsive Table

<!DOCTYPE html>
<html>
    <head>
        <style>
            table {
                border-collapse: collapse;
                width: 100%;
                border: 1px solid black;
            }

            th, td {
                text-align: left;
                padding: 8px;
            }

            tr:nth-child(even) {
                background-color: #f2f2f2
            }
        </style>
    </head>
    <body>
        <div style="overflow-x: auto;">
            <table>
                <tr>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Points</th>
                    <th>Points</th>
                    <th>Points</th>
                    <th>Points</th>
                    <th>Points</th>
                    <th>Points</th>
                    <th>Points</th>
                    <th>Points</th>
                    <th>Points</th>
                    <th>Points</th>
                    <th>Points</th>
                    <th>Points</th>
                    <th>Points</th>
                    <th>Points</th>
                    <th>Points</th>
                    <th>Points</th>
                    <th>Points</th>
                    <th>Points</th>
                    <th>Points</th>
                    <th>Points</th>
                </tr>
                <tr>
                    <td>Jill</td>
                    <td>Smith</td>
                    <td>50</td>
                    <td>50</td>
                    <td>50</td>
                    <td>50</td>
                    <td>50</td>
                    <td>50</td>
                    <td>50</td>
                    <td>50</td>
                    <td>50</td>
                    <td>50</td>
                    <td>50</td>
                    <td>50</td>
                    <td>50</td>
                    <td>50</td>
                    <td>50</td>
                    <td>50</td>
                    <td>50</td>
                    <td>50</td>
                    <td>50</td>
                    <td>50</td>
                </tr>
                <tr>
                    <td>Eve</td>
                    <td>Jackson</td>
                    <td>94</td>
                    <td>94</td>
                    <td>94</td>
                    <td>94</td>
                    <td>94</td>
                    <td>94</td>
                    <td>94</td>
                    <td>94</td>
                    <td>94</td>
                    <td>94</td>
                    <td>94</td>
                    <td>94</td>
                    <td>94</td>
                    <td>94</td>
                    <td>94</td>
                    <td>94</td>
                    <td>94</td>
                    <td>94</td>
                    <td>94</td>
                    <td>94</td>
                </tr>
                <tr>
                    <td>Adam</td>
                    <td>Johnson</td>
                    <td>67</td>
                    <td>67</td>
                    <td>67</td>
                    <td>67</td>
                    <td>67</td>
                    <td>67</td>
                    <td>67</td>
                    <td>67</td>
                    <td>67</td>
                    <td>67</td>
                    <td>67</td>
                    <td>67</td>
                    <td>67</td>
                    <td>67</td>
                    <td>67</td>
                    <td>67</td>
                    <td>67</td>
                    <td>67</td>
                    <td>67</td>
                    <td>67</td>
                </tr>
            </table>
        </div>
    </body>
</html>

添加一个以 overflow-x:auto 修饰的容器元素（例如，<div>）将 <table> 元素包裹起来以实现响应式：

<div style="overflow-x:auto;">
    <table>
        ... table content ...
    </table>
</div>
柯南道尔2606
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
四、数据展示组件(1)
rocktanga的博客
11-15 643
四、数据展示 1、Avatar头像 用来代表用户或事物，支持图片、图标或字符展示 何时使用：需要用头像的时候 (0)<Avatar>组件对应的事件 <1>onError事件: 表示图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为.可选值：无；默认值： -；类型： () => boolean。 (1)<Avatar>组件对应属性: 当然Avatar组件里面依然是可以放文字的，放的文字会展示在头像里面。如&lt
CSS基础——表格
weixin_30587927的博客
03-21 87
1、border-collapse：表格的行和表格的边是合并还是独立。重要 separate：边框独立 collapse：相邻边被合并 转载于:https://www.cnblogs.com/yz9110/p/8616048.html...
css基础知识 表格
lemonnomel1的博客
05-06 196
css基础知识 WEB的三要素：（1）Server（服务器）（2）Client（客户端）（3）HTTP（传输通信）网页的组成部分：（1）html--结构层：不是一种编程语言，而是一种描述性的标记语言用于描述超文本内容的显示方式。（2）css--样式层：层叠样式表，用来控制网页样式并允许将样式信息与网页内容分离的一种标记性的语言。CSS的引入就是为了使HTML更好的适应美工设计。它以html为基础，...
css之高度塌陷及其解决方法------浅谈 清除浮动 的多种方式（clearfix）
以码平川的博客
03-06 231
浅谈 清除浮动 的多种方式（clearfix） 1.0 什么是浮动?是否脱离文档流? 1.1 普通定位static(默认方式) 普通流定位，又称为文档流定位，是页面元素的默认定位方式  页面中的块级元素：按照从上到下的方式逐个排列  页面中的行内元素：按照从左到右的方式逐个排列  但是如何让多个块级元素在一行内显示? 这里就引出了浮动定位 1.2 浮动定位float float属性 取值为 left/right 脱离文档流 1.3 相对定位 relative 元素会相对于它原
CSS 美化表格边框为凹陷立体效果的实现方法
weixin_30328063的博客
08-26 624
<html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> <body> <cent...
HTML CSS应用——格式化网页、文字、表格
cwyp18809的博客
10-07 3875
目录： 一、格式化网页 -----------1、添加滚动条“CSS布局- Overflow” -------------------①两种滚动条的添加方式 -------------------②CSS布局- Overflow的注意要点 二、格式化文字 三、格式化网页 -----------1、将边框合并为单一边框 -------------------①CSS 的border-collapse...
CSS.table.rar_Table_css table_table css_表格css
09-20
1. **表格元素基础**： - `<table>`：这是HTML中创建表格的基本标签，用于定义表格的结构。 - `<tr>`：表示表格行（Table Row），每个表格由多个行组成。 - `<th>`：表示表头单元格（Table Header），用于定义...
html.rar_CSS html5_html5_多表格
09-14
`<table>`标签仍然是创建表格的基础，但新增了`<thead>`, `<tbody>`, `<tfoot>`用于更好地组织表格内容，分别代表表头、主体和页脚。此外，`<th>`元素用于定义表头单元格，提供更好的可读性。`<colgroup>`和`<col>`...
Bootstrap CSS布局之表格
08-31
首先，基础的`.table`样式是Bootstrap表格的基本外观，它确保了表格的清晰易读，通过设置背景色、文字颜色和边框，使表格看起来更加整洁。`.table`类会应用默认的表格样式，如表格宽度100%，有1像素的分隔线等。 1....
漂亮的表格css+html
04-20
HTML（超文本标记语言）是网页内容的基础结构，而CSS（层叠样式表）则是用于美化这些结构的工具。以下将详细介绍这两个技术在创建漂亮表格中的应用。 首先，HTML表格的基本结构包括`<table>`标签，它定义了一个表格...
php table表格样式,CSS中Table（表格）样式是如何设置？（代码实例）
weixin_36334361的博客
03-10 1826
本章给大家介绍CSS中Table(表格)样式是如何设置？(代码实例)。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。一、表格边框border 指定CSS表格边框，使用border属性。下面的例子指定了一个表格的Th和TD元素的黑色边框：table, th, td{border: 1px solid black;}请注意，在上面的例子中的表格有双边框。这是因为表和th/ td元素有独...
表格table
weixin_30477797的博客
03-09 80
表格table 可以用table标签和tr标签和td标签创建一个简单的表格。 width、height、border属性分别设置表格或单元格的宽度、高度、边框，但我们一般用CSS来设置它们。 改变一个td的宽度会影响整列的宽度。 单元格 单元格 单元格 单元格 单元格 变宽度 单元格 单元格 单元格 单元格 单元格 单元格 改...
html--高度塌陷（css）几种小技巧
热门推荐
爱飞翔
12-07 1万+
1.在高度塌陷的父div里面加一个div：<div id="a"> <div id="a1"></div> <div id="a2"></div> <div style="clear: both;"></div>//加一个标签，清除浮动 </div>优点：适合初学者，兼容性 强。 缺点：代码不简练，不利于优化。2.overf
20170726 jQuery练习题 表格操作练习题
xcwc1995的博客
07-26 1848
<!DOCTYPE html> html lang="en"> head> meta charset="UTF-8"> title>title> script src="../js/jquery-3.1.1.min.js">script> script> $(document).ready(function () { $("#1").cli
表格属性border-collapse和hover选择器标签
Lambo
03-27 479
1、将表格的单元格边框合并border-collapse:collapse;将表格的单元格边框合并如：td{border:1px solid #FFF}table{border-collapse:collapse}2、鼠标形状cursor:pointer;（手型）3、在HTML中，a:link;a:visited;a:hover;a:active所表示的效果。1、a:link{color:#FF0...
BFC解决高度坍塌的应用，表格css属性
Addolp的博客
04-01 229
1级标题 Document Document 表格css属性的补充：    1:相邻单元格边框进行合并           border-collapse:...
你不知道的CSS(边框塌陷)
luozc_web的博客
04-13 6504
在html和CSS的学习中，你可能会做很多精美的网页，但其中一些不常见的问题，或许初次遇到的你会很是棘手，下面就一些例子我做一些简单分析。      图片加上链接后，点击该图片默认会产生虚线边框：            解决方法：css样式中设置outline:none;即可。     边框塌陷问题：                       body,div
css实现水滴效果图
最新发布
yinge0508的博客
08-12 1154
【代码】css实现水滴效果图。
CSS 基础
jht_520的博客
08-10 335
比如，增加内边距可以使元素内部的内容与边框之间有更多的空间，而调整外边距可以控制元素与周围元素的距离。通过使用媒体查询，我们可以针对不同的屏幕宽度设置不同的 CSS 规则。例如，在小屏幕设备上，可以隐藏一些不必要的元素，或者改变导航栏的样式，以提供更好的用户体验。它可以决定网页中文字的字体、大小、颜色，还能设置元素的背景颜色、边框样式等。比如，通过 CSS 我们可以将网页的标题设置为醒目的大字号、独特的字体和鲜艳的颜色，使其更加吸引用户的注意力。CSS，即层叠样式表，是网页设计中不可或缺的一部分。
Html+Css+Javascript_web开发基础教程
**Css基础知识** 1. Css简介：Css是层叠样式表的缩写，用于美化 Html 文档。 2. Css的优势： Css 可以将样式和结构分离，提高网页的可维护性和可读性。 3. Css的基本语法：选择器、属性、值等。 4. Css样式表的引入...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值