CSS Table（表格）

一、表格边框

border 指定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;

}

三、表格宽度和高度

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

下面的例子是设置100％的宽度，50像素的th元素的高度的表格：

table

{

width:100%;

}

th

{

height:50px;

}

四、表格文字对齐

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

text-align属性设置水平对齐方式，像左，右，或中心：

td

{

text-align:right;

}

vertical-align 垂直对齐属性设置垂直对齐，比如顶部，底部或中间：

td

{

height:50px;

vertical-align:bottom;

}

五、表格填充

padding 如果在表的内容中控制空格之间的边框，应使用td和th元素的填充属性：

td

{

padding:15px;

}

六、表格颜色

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

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

七、示例

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>CSS教程</title>

<style>

#customers

{

    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;

    width:100%;

    border-collapse:collapse;

}

#customers td, #customers th

{

    font-size:1em;

    border:1px solid #98bf21;

    padding:3px 7px 2px 7px;

}

#customers th

{

    font-size:1.1em;

    text-align:left;

    padding-top:5px;

    padding-bottom:4px;

    background-color:#A7C942;

    color:#ffffff;

}

#customers tr.alt td

{

    color:#000000;

    background-color:#EAF2D3;

}

</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>

<tr>

<td>North/South</td>

<td>Simon Crowther</td>

<td>UK</td>

</tr>

<tr class="alt">

<td>Paris spécialités</td>

<td>Marie Bertrand</td>

<td>France</td>

</tr>

</table>

</body>

</html>

效果：

CSS Table（表格）的更多相关文章

  1. JS+CSS - table 表格固定表头和第一列、内容可滚动 （转载）

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. css table表格无法调整宽度问题分析

    1.在网上查找了相关问题,有的说表格设置了背景图片,把原来的宽度撑开了,导致无法变窄~! 在项目中,原来美工设计的页面,设置了一个块的样式class="title",现在有一段ht ...

  3. css Table 表格宽度失效解决方案

    使用div包裹内容进行支撑 <table cellspacing="0"> <caption>89 HOLLAND ROAD SINGAPORE 27575 ...

  4. [转]CSS如何设置html table表格边框样式

    原文地址:http://www.divcss5.com/wenji/w503.shtml 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对tabl ...

  5. 【代码笔记】Web-CSS-CSS Table(表格）

    一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  6. CSS控制表格（table）样式

    CSS控制表格样式 /* 合并边框重叠部分 */ table{border-collapse:collapse;} /* 单元格边框 */ td{border:1px solid #A7AEB1;}

  7. 利用CSS生成精美细线Table表格

    精美的表格是前端开发用到的一个组件,很多时候我们利用复杂的页面style代码,来生成这样的表格,造成了页面的修改性和可读性都非常差.这里推荐直接使用css来产生一个细线表格. 使用方法也很简单: 第一 ...

  8. 问题：table 可否实现对角线；结果：用div+css模拟表格对角线

    首先声明: 这只是探讨一种CSS模拟表格对角线的用法,实际在工作中可能觉得这样做有点小题大作,这不是本主题讨论的重点.如果对此深以为然的朋友,请一笑过之... 有时在插入文档时,要用到表格对角线,常见 ...

  9. java：HTML（table表格，ul列表）和CSS（导入.css文件，三种定义颜色方式，三种样式选择器，a标签属性顺序，）

    1.重点掌握: html: 1.form表单:input,checkbox,seelct,radio,button,submit 2.table表格:thead-->tr-->th;tbo ...

随机推荐

  1. 在Eclipse中显示.project和.classpath和.setting目录

    在Eclipse中显示.project, .classpath, .gitignore文件和.setting文件夹 在Eclipse中使用git,并显示.gitigonre文件,进行项目管理 在Ecl ...

  2. python中的函数的执行分类

    author:headsen  chen date: 2018-03-21  17:42:13 notice:This  article created by headsen chen himself ...

  3. 【BZOJ3232】圈地游戏 分数规划+最小割

    [BZOJ3232]圈地游戏 Description DZY家的后院有一块地,由N行M列的方格组成,格子内种的菜有一定的价值,并且每一条单位长度的格线有一定的费用. DZY喜欢在地里散步.他总是从任意 ...

  4. Spring Cloud Feign 使用OAuth2

    Spring Cloud 微服务架构下,服务间的调用采用的是Feign组件,为了增加服务安全性,server之间互相调用采用OAuth2的client模式.Feign使用http进行服务间的通信,同时 ...

  5. IDEA整合日志框架Log4j2+Slf4j详细配置过程

    日志框架这么多,他们之间到底是什么关系呢?笼统的讲就是slf4j是一系列的日志接口,而log4j2.logback是具体实现了接口功能的日志框架.现在的主流日志接口都使用slf4j,而日志的实现就见仁 ...

  6. kibana5.6源码分析3--目录结构

    kibana5.6的项目目录结构: bin:系统启动脚本目录 config:kibana配置文件目录 data:估计是缓存一些系统数据的,uuid放在这里面 docs: maps:此目录包含TileM ...

  7. APACHE优化参数

    1.CentOS5.8 x86_64位 采用最小化安装,系统经过了基本优化篇2.apache版本:httpd-2.2.293.源码包存放位置:/home/oldboy/tools4.源码包编译安装位置 ...

  8. 解决Cell重绘导致 重复的问题

    IOS在Cell上的优化令人觉得底层框架的成熟,可是有些情形却会造成不必要的麻烦, 当使用了 UITableViewCell *cell = [tableView dequeueReusableCel ...

  9. android mock location

    原理:用 setTestProviderLocation 设置模拟gps的位置 http://androidcookbook.com/Recipe.seam?recipeId=1229 http:// ...

  10. [转载]Elasticsearch、MongoDB和Hadoop比较

    IT界在过去几年中出现了一个有趣的现象.很多新的技术出现并立即拥抱了“大数据”.稍微老一点的技术也会将大数据添进自己的特性,避免落大部队太远,我们看到了不同技术之间的边际的模糊化.假如你有诸如Elas ...