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> ...
随机推荐
- RDD、DataFrame和DataSet的区别
原文链接:http://www.jianshu.com/p/c0181667daa0 RDD.DataFrame和DataSet是容易产生混淆的概念,必须对其相互之间对比,才可以知道其中异同. RDD ...
- php页面静态化技术；学习笔记
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- .NET 扩展方法 （一）
我还记得刚刚学编程的时候,老师经常会提到一句话:注意空指针.所以经常在某些“入口”位置,进行代码校验,空指针的判断就是其中的一项工作. string类型作为常用的数据类型,它在项目中出现的机率极高,所 ...
- WCF服务自我寄宿 Windows服务
WCF寄宿有自我寄宿跟IIS寄宿 服务代码: [ServiceContract] ---服务契约 public interface ICustomerService { [OperationContr ...
- css3实现光标悬浮滚动菜单
效果:http://hovertree.com/texiao/css3/21/ 本文所用到的CSS知识请点击效果展示也中第一和第二个链接. 代码: <!DOCTYPE html> < ...
- sqlserver 时间格式函数详细
一.时间函数 在使用存储过程,sql函数的时候,会遇到一些对时间的处理.比如时间的获取与加减.这里就用到了sql自带的时间函数.下面我列出这些函数,方便日后记忆,使用. --getdate 获取当前时 ...
- Xamarin.ios引用第三方SDK
引言 诚然,Xamarin是个优秀的跨平台解决方案,但毕竟还是不能将Native中所有的方法都直接实现.诸如各种第三方库,也都只有java/oc原生版本的SDK,无法直接拿过来直接使用.但,不能直接拿 ...
- nodejs连接mongodb的方法
一. var express = require('express'); var mongodb = require('mongodb'); var app = express(); app.use( ...
- 数据结构：单链表结构字符串（python版）
#!/urs/bin/env python # -*- coding:utf-8 -*- #异常类 class stringTypeError(TypeError): pass #节点类 class ...
- 对hashmap，hashset，hashtable的理解
1.首先先理一下java的集合关系,Collection和Map接口是所有集合接口的根结点,其他集合都直接或者间接的实现了他们中的一个:collection下有:list(元素可重复)和set(不可重 ...