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> ...
随机推荐
- JS代码实现的聊天框
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- springmvc4环境简单搭建和定时任务
之前复制粘贴创建了几个ssm的项目,然而回头让自己写的时候还是一头雾水,究其原因是spring的陌生.仅仅是写过几个helloworld而已.而且是照着写.我都不知道springmvc到底需要多少ja ...
- JS正则表达式总结
关于JS的正则用法,已经有很多文章了,大同小异 正则表达式30分钟入门教程 MDN正则表达式 玩转JavaScript正则表达式 ES6正则的扩展
- EF中的实体类型【Types of Entity in Entity】（EF基础系列篇8）
We created EDM for existing database in the previous section. As you have learned in the previous se ...
- 基于MVC4+EasyUI的Web开发框架经验总结（17）--布局和对话框自动适应大小的处理
在我自己的<Web开发框架>中,用了很多年的EasyUI,最新版本EasyUI为1.4.5,随着版本的更新,其很多功能得到了很大的完善和提高,同时也扩展了一些新的功能,以前在布局和对话框弹 ...
- discuz X3.1 源代码阅读，记录代码片段
require_once libfile('function/post'); // /source/function/function_post.php require_once libfile('p ...
- python基础之异常处理
Python3 错误和异常 作为Python初学者,在刚学习Python编程时,经常会看到一些报错信息,在前面我们没有提及,这章节我们会专门介绍. Python有两种错误很容易辨认:语法错误和异常. ...
- MySQL备份命令mysqldump参数说明与示例
1. 语法选项说明 -h, --host=name主机名 -P[ port_num], --port=port_num用于连接MySQL服务器的的TCP/IP端口号 --master-data这个选项 ...
- Jquery使用小技巧
1. 禁止右键使用 view plaincopy to clipboardprint? 1. $(document).ready(function(){ 2. $(do ...
- jQuery对表单、表格的操作及更多应用
<head> <style type="text/css"> .even { background-color: #fff38f;/*偶数行样式*/ ...