CSS Table(表格)
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(表格)的更多相关文章
- JS+CSS - table 表格固定表头和第一列、内容可滚动 (转载)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- css table表格无法调整宽度问题分析
1.在网上查找了相关问题,有的说表格设置了背景图片,把原来的宽度撑开了,导致无法变窄~! 在项目中,原来美工设计的页面,设置了一个块的样式class="title",现在有一段ht ...
- css Table 表格宽度失效解决方案
使用div包裹内容进行支撑 <table cellspacing="0"> <caption>89 HOLLAND ROAD SINGAPORE 27575 ...
- [转]CSS如何设置html table表格边框样式
原文地址:http://www.divcss5.com/wenji/w503.shtml 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对tabl ...
- 【代码笔记】Web-CSS-CSS Table(表格)
一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- CSS控制表格(table)样式
CSS控制表格样式 /* 合并边框重叠部分 */ table{border-collapse:collapse;} /* 单元格边框 */ td{border:1px solid #A7AEB1;}
- 利用CSS生成精美细线Table表格
精美的表格是前端开发用到的一个组件,很多时候我们利用复杂的页面style代码,来生成这样的表格,造成了页面的修改性和可读性都非常差.这里推荐直接使用css来产生一个细线表格. 使用方法也很简单: 第一 ...
- 问题:table 可否实现对角线;结果:用div+css模拟表格对角线
首先声明: 这只是探讨一种CSS模拟表格对角线的用法,实际在工作中可能觉得这样做有点小题大作,这不是本主题讨论的重点.如果对此深以为然的朋友,请一笑过之... 有时在插入文档时,要用到表格对角线,常见 ...
- java:HTML(table表格,ul列表)和CSS(导入.css文件,三种定义颜色方式,三种样式选择器,a标签属性顺序,)
1.重点掌握: html: 1.form表单:input,checkbox,seelct,radio,button,submit 2.table表格:thead-->tr-->th;tbo ...
随机推荐
- jquery做简单特效
1.点击触发消失效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...
- 【BZOJ4244】邮戳拉力赛 DP
[BZOJ4244]邮戳拉力赛 Description IOI铁路是由N+2个站点构成的直线线路.这条线路的车站从某一端的车站开始顺次标号为0...N+1. 这条路线上行驶的电车分为上行电车和下行电车 ...
- js apply()、call() 使用参考
引入,求一个数组的最大值,有这么一种快捷方法:Math.max.apply(null,arr); 但是最初看 JavaScript高级程序设计 的时候,没看懂,原文(斜体表示)如下: 每个函数都包含两 ...
- Linux系统时间快8个小时
1.vi /etc/sysconfig/clock #编辑文件ZONE="Asia/Shanghai"UTC=false #设 ...
- Python--Get and Post
#python3 get and post 简单封装 from urllib import request, parse import json def RequestMethod(methodR, ...
- Spring---Bean的继承与依赖
Spring 允许继承 bean 的配置(通过Bean的parent属性来指定,例如parent=”teacher“), 被继承的 bean 称为父 bean. 继承这个父 Bean 的 Bean ...
- ORACLE安装(12c-Redhat6.5)
Oracle安装(12c-Redhat6.5) Redhat6.5系统准备 / 10G SWAP 4G /boot 200M /HOME 4G /usr 8G /var 4G /u01 Preinst ...
- 在VMWare的虚拟机中设置共享文件夹(Linux-Ubuntu系统)
1.点击菜单中的虚拟机---设置---选项---共享文件夹,选择总是开启: 2.添加主机共享的文件夹: 3.安装vmware tools: (1)打开虚拟机---安装vmware tools: (2) ...
- QuantStart量化交易文集
Over the last seven years more than 200 quantitative finance articles have been written by members o ...
- 解决Xshell中使用hbase shell backspace无法删除
进入到XShell 文件 –> 属性 –> 终端 –> 键盘 在 DELETE键序列 和 BACKSPACE键序列 中都选择 ASCII 127 最后进入 Hbase 命令行测试,可 ...