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> ...
随机推荐
- 《HelloGitHub月刊》第08期
<HelloGitHub>第08期 兴趣是最好的老师,<HelloGitHub>就是帮你找到兴趣! 简介 最开始我只是想把自己在浏览GitHub过程中,发现的有意思.高质量.容 ...
- 【集合框架】JDK1.8源码分析之Comparable && Comparator（九）
一.前言 在Java集合框架里面,各种集合的操作很大程度上都离不开Comparable和Comparator,虽然它们与集合没有显示的关系,但是它们只有在集合里面的时候才能发挥最大的威力.下面是开始我 ...
- [Web API] Web API 2 深入系列(3) 激活HttpController
目录 HttpController 创建HttpController IAssembliesResolver IHttpControllerTypeResolver HttpControllerTyp ...
- json是个啥东东
xml 不用说 只要是搞web开发的 没听说谁不知道的 一种类似数据传输格式定义的语言 但是他却不是一个真正的轻量级的东西 其他的不说 只要传输一点很少的数据 经过他那左括号右括号 还有什么属性 一包 ...
- cors解决webapi post时报错405 method not allowed
nuget控制台敲入以下命令:Install-Package Microsoft.AspNet.WebApi.Cors –IncludePrerelease 打开WebApiConfig.cs添加如下 ...
- 基于Netbeans的PHPUnit单元测试环境搭建
一.配置 PHPUnit截至2015-10-16,稳定版已更新至5.0.6,要求使用PHP v5.6及以上的环境才能使用. PHPUnit的4.8系列要求在PHP v5.3.3以上环境使用. Netb ...
- 【转】Cookie和Session区别和联系详解
会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话.常用的会话跟踪技术是Cookie与Session.Cookie通过在客户端记录信息确定用户身份,Session通过在服务器端 ...
- java Properties异常:Malformed \uxxxx encoding.
昨天项目中遇到一个 java.lang.IllegalArgumentException: Malformed \uxxxx encoding.这样的一个异常,debug了一下发现是读取propert ...
- .net开发过程中Bin目录下面几种文件格式的解释
在.NET开发中,我们经常会在bin目录下面看到这些类型的文件: .pdb..xsd..vshost.exe..exe..exe.config..vshost.exe.config 项目发布的时候,往 ...
- JavaScript下的setTimeout(fn,0)意味着什么？
近期在研究异步编程的我对于setTimeout之类的东西异常敏感.在SegmentFault上看到了一个问题<关于SetTimeout时间设为0时>:提问者读了一篇文章,原文解释setTi ...