《CSS 表格》_HarkerYX的博客-程序员信息网

技术标签: # 【 CSS 】  

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元素的黑色边框:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
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元素有独立的边界。

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

折叠边框

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
table {
    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>注意:</b> 如果没有指定 !DOCTYPE  border-collapse 属性在 IE8 及更早 IE 版本中是不起作用的。</p>

</body>
</html>

表格宽度和高度

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
table,td,th
{
	border:1px solid black;
}
table
{
	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>

表格文字对齐

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
table,td,th
{
	border:1px solid black;
}
td
{
	text-align:right;
}
</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>

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
table, td, th
{
	border:1px solid black;
}
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>

表格填充

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
table, td, th
{
	border:1px solid black;
}
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>

表格颜色

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
table, td, th
{
	border:1px solid green;
}
th
{
	background-color:green;
	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>

创建一个个性的表格

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</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>

如何定位表格标题

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
caption {caption-side:bottom;}
</style>
</head>

<body>

<table border="1">
<caption>Table 1.1 Customers</caption>
<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>
<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>
<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>
<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>
</table>

<p><b>注意:</b>如果 !DOCTYPE 指定 IE 8 支持 caption-side 属性 .</p>
</body>
</html>

 

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/yexiangCSDN/article/details/93502676

智能推荐

Android5.0+ 新Notification smallIcon_china_cqcone的博客-程序员信息网

  android5.0以上版本对Notification进行了改进,对于通知栏上的小图标不再支持五颜六色的png图像了,仅支持只有alpha通道灰度图。  可以使用photoshop创建此种图像:步骤一:新建幅背景内容透明的RGB图像,并用画笔勾勒出图标的形状,步骤二:切换到通道面板中新建一个通道(默认就为alpha通道),然后关闭RGB通道,勾选Alpha1通道,步骤三:点击菜单栏文件-导出p...

Mac为系统JDK安装webhook证书_横竖皆贰的博客-程序员信息网

//Windowskeytool-import-aliascacerts-keystore%java_home%\jre\lib\security\cacerts-fileC:\abc.cer-trustcacerts//Mackeytool-import-aliascacerts-keystore%java_home%/jre/lib/security/cacerts-file/Users/x..x/abc.cer-trustcacerts此时命令行会...

深度学习边缘计算综述论文阅读笔记_zjdy106678的博客-程序员信息网_边缘计算深度学习

文章《Convergence of Edge Computing and Deep Learning: A Comprehensive Survey》这是一篇关于深度学习和边缘计算基础知识的综述,包含了深度学习DL的几种网络模型的介绍,边缘计算的基础知识的介绍,以及二者的结合,如何利用DL来发展边缘计算,如何用边缘计算发展DL,怎么在边缘计算的框架下进行DL的训练,DL在边缘上运行的预测结果怎么样,二者怎么更好融合形成智慧边缘(Intelligent Edge)和边缘智慧(Edge Intelligen

SR显著图(A Spectral Residual Approach)_GHelpU的博客-程序员信息网_显著性图

1 简介SR(Spectral Residual,剩余谱)模型独立于对象的特征,类别或其他形式的先验知识。通过分析输入图像的对数谱,可以在空间域中获取输入图像的剩余谱,进而用快速的方法在空间域中构造相关的显著性图。模型在自然图像和艺术图像的测试结果表明该方法具有计算效率高且鲁棒性好的特点[1]。论文指出,图像的信息是由先验知识的信息和显著部分的信息构成,通过在对数谱中用图像的信息减去先验知...

随便推点

socket或pipe 一端断开; errno 104:connetction reset by peer的错误分析_持续努力的博客-程序员信息网_socket返回104

errno 104:connetction reset by peer的错误分析https://blog.csdn.net/alibo2008/article/details/45694845 errno = 104错误表明你在对一个对端socket已...

idea中使用Tomcat debug模式启动web项目突然异常缓慢_intomylife的博客-程序员信息网

做项目的时候重启Tomcat半天没成功,控制台也没报错重启idea,重启电脑都没有用...结果是因为程序中有断点标记在了Method Breakpoints上了希望能够帮助到你~over...

一行代码搞定你的QueryString!(原创)_sunfollowme的博客-程序员信息网

导读:   Web开发做得多了,总觉得是体力活,于是搞些代码让自己脱离无聊的Coding吧(是脱离“无聊的”Coding,不是脱离无聊的“Coding”)。      初级阶段   为每个QueryString写转换的代码,针对不同的类型,进行转换和错误处理。      中级阶段   写了一个函数,专门做转换(1.1里写的):   /// /// Convert query string

CSFramework---通信层(Communication)的实现_Ailsa Zhang的博客-程序员信息网

C/S 开发框架之通信层的实现CSFramework编写的主要目的是,为未来编写相应的服务器/客户端模式下的应用系统提供便利。也就是说,我们的CSFramework将完成最底层的相应工作,使得开发人员在使用此框架时,无需再编写底层操作的代码。最底层–通信层(Communication)的实现基于服务器端和客户端,双方之间需要进行信息的交互,也就是说,无论是服务器端还是客户端,都同时作为信息的...

指令集_diandianyangyi的博客-程序员信息网_指令集怎么写

转载自 http://www.cnblogs.com/li-daphne/p/4067241.html一个完整的指令集结构包括Instuction Fetch Instuction DecodeOperand FetchExcuteResult StoreNext Instruction

php内存管理机制、垃圾回收机制_jacklin_001的博客-程序员信息网_php内存管理机制和垃圾回收机制

一、内存管理机制&lt;?php//内存管理机制var_dump(memory_get_usage());//获取内存方法,加上true返回实际内存,不加则返回表现内存$a = "laruence";var_dump(memory_get_usage());unset($a);var_dump(memory_get_usage());//输出(在我的个人电脑上, 可能会因为系统,PHP版本,载入的扩展不同而不同)://int 240552//int 240720//int 2405

推荐文章

热门文章

相关标签