W3School-CSS 表格实例
CSS 表格实例
CSS 实例
- CSS 背景实例
- CSS 文本实例
- CSS 字体(font)实例
- CSS 边框(border)实例
- CSS 外边距 (margin) 实例
- CSS 内边距 (padding) 实例
- CSS 列表实例
CSS 表格实例- 轮廓（Outline） 实例
- CSS 尺寸 (Dimension) 实例
- CSS 分类 (Classification) 实例
- CSS 定位 (Positioning) 实例
- CSS 伪类 (Pseudo-classes)实例
- CSS 伪元素 (Pseudo-elements)实例
01设置表格的布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>01设置表格的布局</title>
<style type="text/css">
body {background-color: #FF7070;}
table.one {
table-layout: automatic;
}
table.two {
table-layout: fixed;
}
</style>
</head>
<body>
<table class="one" border="1" width="100%">
<tr>
<td width="20%">1000000000000000000000</td>
<td width="40%">1000</td>
<td width="40%">1000</td>
</tr>
</table>
<table class="two" border="1" width="100%">
<tr>
<td width="20%">1000000000000000000000</td>
<td width="40%">1000</td>
<td width="40%">1000</td>
</tr>
</table>
</body>
</html>
02显示表格中的空单元
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>02显示表格中的空单元</title>
<style type="text/css">
body {
background-color: #FF7070;
}
table {
border-collapse: separate;
empty-cells: hide;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td>我老大</td>
<td>我老二</td>
</tr>
<tr>
<td>我老三</td>
<td></td>
</tr>
</table>
</body>
</html>
03合并表格边框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>03合并表格边框</title>
<style type="text/css">
table {
border-collapse: collapse;
}
table,
td,
th {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>老几</th>
<th>老几</th>
</tr>
<tr>
<td>我老大</td>
<td>我老二</td>
</tr>
<tr>
<td>我老三</td>
<td>我老四</td>
</tr>
</table>
</body>
</html>
04设置表格边框之间的空白
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>04设置表格边框之间的空白</title>
<style type="text/css">
table.one {
border-collapse: separate;
border-spacing: 10px;
}
table.two {
border-collapse: separate;
border-spacing: 10px 50px;
}
</style>
</head>
<body>
<table class="one" border="1">
<tr>
<td>A1</td>
<td>A2</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
</tr>
</table>
<table class="two" border="1">
<tr>
<td>A1</td>
<td>A2</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
</tr>
</table>
</body>
</html>
05设置表格标题的位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>05设置表格标题的位置</title>
<style type="text/css">
caption {
caption-side: bottom;
}
</style>
</head>
<body>
<table border="1">
<caption>我是标题</caption>
<tr>
<td>111</td>
<td>222</td>
</tr>
<tr>
<td>333</td>
<td>444</td>
</tr>
</table>
</body>
</html>
06制作一个表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>制作一个表格</title>
<style type="text/css">
#customers {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
width: 100%;
border-collapse: collapse;
}
#customers td,
#customers th {
border: 1px solid #98bf21;
}
#customers th {
text-align: left;
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>Apple</td>
<td>Steven Jobs</td>
<td>USA</td>
</tr>
<tr class="alt">
<td>Baidu</td>
<td>Li YanHong</td>
<td>China</td>
</tr>
<tr>
<td>Google</td>
<td>Larry Page</td>
<td>USA</td>
</tr>
<tr class="alt">
<td>Lenovo</td>
<td>Liu Chuanzhi</td>
<td>China</td>
</tr>
<tr>
<td>Microsoft</td>
<td>Bill Gates</td>
<td>USA</td>
</tr>
<tr class="alt">
<td>Nokia</td>
<td>Stephen Elop</td>
<td>Finland</td>
</tr>
</table>
</body>
</html>
CSS 表格实例总结
W3School-CSS 表格实例的更多相关文章
- CSS 表格实例
CSS 表格实例CSS 表格属性可以帮助您极大地改善表格的外观.CSS Table 属性属性 描述border-collapse 设置是否把表格边框合并为单一的边框.border-spacing 设置 ...
- HTML 学习笔记 CSS(表格)
CSS 表格属性可以帮助您极大的改善表格的外观 表格边框 如需在CSS中设置表格的边框 请使用border属性. 在下面的例子中table th 以及td设置了蓝色边框. table, th, td ...
- CSS：CSS 表格
ylbtech-CSS:CSS 表格 1.返回顶部 1. CSS 表格 使用 CSS 可以使 HTML 表格更美观. Company Contact Country Alfreds Futterkis ...
- 第 18 章 CSS 表格与列表
学习要点: 1.表格样式 2.列表样式 3.其他功能 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 表格和列表,通过表格和列表的样式设置,让表格和列表显示更加多元化. 一．表格样式 表格有五 ...
- Bootstrap css栅格 + 网页中插入代码+css表格
设计达人 http://www.shejidaren.com/30-minimal-app-icons.html CSS栅格: <!DOCTYPE html> <html lang= ...
- 第七十五节，CSS表格与列表
CSS表格与列表 学习要点: 1.表格样式 2.列表样式 3.其他功能 一．表格样式 表格有五种独有样式,样式表如下: 属性 值 ...
- CSS表格(未完成)
CSS 表格 使用 CSS 可以使 HTML 表格更美观. 表格边框 指定CSS表格边框,使用border属性. 下面的例子指定了一个表格的Th和TD元素的黑色边框:
- css sprite实例
css sprite直译过来就是CSS精灵.通常被解释为“CSS图像拼合”或“CSS贴图定位”.本文章向码农们介绍css sprite使用方法和基本使用实例,需要的码农可以参考一下. 一.什么是css ...
- CSS 分页实例
CSS 分页实例 一.简单分页 如果你的网站有很多个页面,你就需要使用分页来为每个页面做导航. 以下实例演示了如何使用 HTML 和 CSS 来创建分页: <!DOCTYPE html> ...
随机推荐
- 安装好centOS5.5 后中文乱码
1.网页浏览的中文乱码 [root@localhost ~]# yum install fonts-chinese 下载完毕后,浏览器可以浏览中文网页. 2.应用显示中文乱码 #vi /etc/sys ...
- 11.Configure Many-to-Many（配置多对多关系）【Code-First系列】
现在学习EF Code-First多对多的配置. 这里我们举例:学生和班级实体,一个学生可以选修多个课程,多个学生也可以选修同一个课程. 一.使用数据注解特性,配置多对多的关系 using Syste ...
- jQuery 判断是否包含某个属性
1.Get the attribute, check the value var attr = $(this).attr('name'); // For some browsers, `attr` i ...
- webControls与客户端脚本路径
网上有用的资料不多,在一本电子书中摘抄了内容如下 webControls配置节只有一个clientScriptsLocation属性,此属性用于指定ASP.NET客户端脚本的默认存放路径.这些文件是包 ...
- css3全屏背景图片切换特效
效果体验:http://hovertree.com/texiao/css3/10/ 一般做图片切换效果,都会使用JS或者jQuery脚本,今天发现,其实只用CSS也可以实现.试试效果吧. 效果图: 代 ...
- Mac入门（一）基本用法
我前五年一直外包到微软,每天使用的都是Windows系统和.NET. 2012年加入VMware, 公司的工作机是台Mac 笔记本(MacBook Pro), 所以有机会接触Mac系统 Mac和Wi ...
- GJM ：SqlServer语言学习笔记
----------------------------SqlServer RDBMS 关系型数据库管理系统 Row/Record 行 Colimn/Attribute 列 Field/Cell 字段 ...
- CSS：CSS使用Tips
Css是前端开发中效果展现的主要部分之一,良好的Css书写习惯可以为实际的项目开发提高效率,也可以为实现良好的团队合作提供保证. 一般新手在使用Css的时候经常会犯一些错误,出现一些不经意的漏洞,如果 ...
- PHP中的特殊类，接口类和抽象类(都不能直接实例化)
接口类不用实例化,需要一一实现接口定义的所有方法.关键字interface implements 接口interface 是一个规定,给人继承用的东西,有点像抽象类在里面定义的方法,却不去实例化,而需 ...
- C# new关键字
在 C# 中,new 关键字可用作运算符.修饰符或约束 1.new 运算符:用于创建对象和调用构造函数.2.new 修饰符:用作修饰符时,new 关键字可以显式隐藏从基类继承的成员.3.new 约束: ...