程序员之家
程序员之家

CSS 表格


使用 CSS 可以使 HTML 表格更美观。

表格示例:

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Berglunds snabbköp Christina Berglund Sweden
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Königlich Essen Philip Cramer Germany
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy
North/South Simon Crowther UK
Paris spécialités Marie Bertrand France
The Big Cheese Liz Nixon USA
Vaffeljernet Palle Ibsen Denmark

表格边框

指定CSS表格边框,使用border属性。

下面的例子指定了一个表格的 th td 元素的黑色边框:

table, th, td
{
    border: 1px solid black;
}

请注意,在上面的例子中的表格有双边框。这是因为表和 th/ td元素有独立的边界。

为了显示一个表的单个边框,使用 border-collapse属性。


折叠边框

border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开:

table
{
    border-collapse:collapse;
}
table,th, td
{
    border: 1px solid black;
}

表格宽度和高度

widthheight 属性定义表格的宽度和高度。

下面的例子是设置100%的宽度,50像素的 

表格宽度和高度

Width和height属性定义表格的宽度和高度。

下面的例子是设置100%的宽度,50像素的 th 元素的高度的表格:

table 
{
    width:100%;
}
th
{
    height:50px;
}

表格文字对齐

表格中的文本对齐和垂直对齐属性。

text-align属性设置水平对齐方式,向左,右,或中心:

td
{
    text-align:right;
}

垂直对齐属性设置垂直对齐,比如顶部,底部或中间:

td
{
    height:50px;
    vertical-align:bottom;
}

表格填充

如需控制边框和表格内容之间的间距,应使用td和th元素的填充属性:

td
{
    padding:15px;
}

表格颜色

下面的例子指定边框的颜色,和th元素的文本和背景颜色:

table, td, th
{
    border:1px solid green;
}
th
{
    background-color:green;
    color:white;
}

手机扫码阅读本文


本文来自互联网,本网站转载的目的在于传递更多信息以供访问者学习参考,所属内容只代表原作者的个人观点,不代表本网站的立场和价值判断,版权归原作者所有。如有侵犯您的版权,请联系我们,我们收到后会尽快核实并第一时间改正。


手机扫码阅读本文

前端工程化:基于Vue.js 3.0的设计与实践【图】
前端工程化:基于Vue.js 3.0的设计与实践

这是一本从0到1详细介绍前端工程化开发的指导手册前端开发领域多位大咖鼎力推荐.前端开发新技能 Vue3 爱猫的程序开发大咖倾力之作

HTML+CSS+Javascript入门经典 第3版【图】
HTML+CSS+Javascript入门经典 第3版

前端开发程序设计教程书籍,以丰富案例和循序渐进的教程,帮助读者零基础自学入门HTML、CSS、Javascript、Web前端开发,提供源代码下载。

Javascript高级程序设计(第4版)【图】
Javascript高级程序设计(第4版)

web前端开发教程,JS"红宝书"升级,入门+实战,涵盖ECMAScript,2019,提供教学视频+配套编程环境,可直接在线运行随书代码

css css-table