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> ...
随机推荐
- 软件工程-构建之法 理解C#一小段程序
一.前言 老师给出的要求: 阅读下面程序,请回答如下问题: 问题1:这个程序要找的是符合什么条件的数? 问题2:这样的数存在么?符合这一条件的最小的数是什么? 问题3:在电脑上运行这一程序,你估计多长 ...
- （十一）WebGIS中要素（Feature）的设计
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.前言 在GIS中元素一般分为点元素,线元素,面元素以及symbol ...
- Ionic2学习笔记（8）：Local Storage& SQLite
作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5557947.html Ionic2可以有两种方式来存储数据,Local S ...
- Mono.Cecil 初探（一）：实现AOP
序言 本篇文章介绍基于Mono.Cecil实现静态AOP的两种方式:无交互AOP和交互式AOP. 概念介绍 Mono.Cecil:一个可加载并浏览现有程序集并进行动态修改并保存的.NET框架. AOP ...
- 模仿迅L看看<音频播放器> 实现点击进度条，跳转播放
<Style x:Key="btnFallback" TargetType="{x:Type Button}"> <Setter Proper ...
- Newtonsoft.Json(Json.Net)学习笔记
Newtonsoft.Json 在Vs2013中就有自带的: 下面是Json序列化和反序列化的简单封装: /// <summary> /// Json帮助类 /// </summar ...
- sql server 查看表的死锁和Kill 死锁进程
查询出来 select request_session_id spid, OBJECT_NAME(resource_associated_entity_id) tableNa ...
- Java日期时间操作的一些方法
1. 获得Calendar实例: Calendar c = Calendar.getInstance(); 2. 定义日期/时间的格式: SimpleDateFormat sdf =new Simpl ...
- 解决WIN7与虚拟机CentOS的文件夹共享问题
一.系统与软件 WIN7 64bit.VirtualBox 5.0.14.CentOS 6.5.SecureCRT 7.2.3 二.使用文件夹共享需要安装增强功能,但是安装时无法读取光盘iso文件 三 ...
- 【读书笔记】2016.11.19 北航 《GDG 谷歌开发者大会》整理
2016.11.19 周六,我们在 北航参加了<GDG 谷歌开发者大会>,在web专场,聆听了谷歌公司的与会专家的技术分享. 中午免费的午餐,下午精美的下午茶,还有精湛的技术,都是我们队谷 ...