文档章节

《Head first HTML与CSS 第二版》读书笔记 第十三章 表格和列表

一万
 一万
发布于 2016/08/07 10:36
字数 578
阅读 32
收藏 0

1、表格

HTML表格元素<table><tr><th><td>一起用来创建一个表格。

<table>元素定义并包围整个表格。

<tr>表示一行。

<td>表示一个单元格。

<th>用来表示行或列表头的单元格。

<caption>元素提供表格的额外信息(相当于表格的标题)。默认的,表头在表格的上方。table的CSS属性caption-side指定caption的位置,下面的代码将caption移动的表格下部:

table {
	caption-side:	bottom;
}

对于表格的每个单元格,有内边距和边框,但是没有外边距。相对的table有一个border-spacing的CSS属性定义整个表格每个单元格共同的外边距。

也可以定义垂直和水平方向上的外边距,例如:

border-spacing: 10px 30px;

将border-collapse的CSS属性设置为collapse,可以使单元格之间没有边框间距。浏览器会忽略表格上设置的所有边框间距。另外还会把两个边框合并成一个边框。

 

为表格设置间隔颜色的两种实现方法:

(1)定义一个类,为其设置背景颜色,在需要的表格行<tr>指定其归属这个类;

(2)使用伪类nth-child,表示一个元素相对于它兄弟元素的数字顺序:

tr:nth-child(2n+1){
	background-color: #fcba7a;
}

这段代码指定奇数tr的背景颜色。可以使用n指定简单的表达式。还可以使用odd或even表示奇数或偶数元素。

 

使用td的rowspan属性可以指定一个单元格占多少行,colspan指定一个单元格占多少列。相应的要删除其占据位置的行或列。

 

2、列表

li的list-style-type的CSS属性控制项目符号,默认的值是disc,可选的有circle、square、none。

对于有序列表可以控制项目序号:decimal十进制数,upper-alpha大写字母,lower-alpha小写字母,upper-roman大写罗马数字,lower-roman小写罗马数字。

list-style-image属性将项目符号变为图像。

list-style-position属性控制文本回绕。值为inside表示文本会在标记下回绕,outside表示文本本身回绕。

 

© 著作权归作者所有

共有 人打赏支持
一万
粉丝 29
博文 102
码字总数 173386
作品 0
朝阳
程序员
私信 提问
【原创】《深入剖析Tomcat》读书笔记

第一章 一个简单的Web服务器 第二章 一个简单的servlet容器 第三章 连接器 第四章 Tomcat的默认连接器 第五章 servlet容器 第六章 生命周期 第七章 日志记录器 第八章 载入器 第九章 Sessio...

pandudu
2015/12/22
46
0
《Head first HTML与CSS 第二版》读书笔记 第七章 CSS入门

CSS由规则组成,每个规则为选择的HTML元素提供样式。 典型的规则包括一个选择器以及一个或多个属性和值。 选择器指定 规则将应用到哪些元素。 每个属性声明以一个分号结束。 规则中所有属性和...

一万
2016/07/31
36
0
HTML笔记

html语言即超文本标记语言。 超文本标sss记语言,标准通用标记语言下的一个应用。 “超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。 超文本标记语言的结构包括“头”...

柒晓白
2017/09/15
0
0
13篇文章,教你学会ES6知识点

ES6 深入理解ES6》学习笔记 本文用于汇总链接到各个子章节的内容,github 欢迎大家题issues和PR,如果对你有帮助,也可以给 star 支持 :) 目录 第一章 块级绑定 第二章 字符串和正则表达式 ...

你听___
2018/05/08
0
0
《Head first HTML与CSS 第二版》读书笔记 第三章 构建模块

使用<q>元素可在HTML中添加简短的引用。每个引用都要用一个<q>和</q>包围,文本不用添加双引号,浏览器会负责添加。 使用<q>元素并不仅仅是取代双引号这么简单。如果浏览器知道这是一个引用,...

一万
2016/07/29
24
0

没有更多内容

加载失败,请刷新页面

加载更多

TiDB 3.0 Beta Release Notes

2019 年 1 月 19 日,TiDB 发布 3.0 Beta 版,对应 master branch 的 TiDB-Ansible。相比 2.1 版本,该版本对系统稳定性、优化器、统计信息以及执行引擎做了很多改进。 TiDB 新特性 支持 Vi...

TiDB
25分钟前
2
0
从拼多多优惠券事件看到的一些反思

本文由云+社区发表 作者:颜国平 摘要:最近几年,电商行业飞速发展,各种创业公司犹如雨后春笋大量涌现,商家通过各种活动形式的补贴来获取用户、培养用户的消费习惯,即将到来的“ 购物狂欢...

腾讯云加社区
26分钟前
4
0
记录一次BUG

1: 请求注册页面时生成一个UUID, 并且将UUID隐藏在页面中并且添加到session中去。 2: 发送短信时获取手机号和UUID,将两者发送至服务器 3: 先判断UUID和session中UUID是否一致。 不一致就...

专业写BUG的程序员
31分钟前
1
0
阿里云漏洞提示:phpMyAdmin <=4.8.1 checkPageValidity函数缺陷可导致GETSHELL

如题: phpMyAdmin <=4.8.1 后台checkPageValidity函数缺陷可导致GETSHELL 即:checkPageValidity函数对外部输入过滤不严,可导致本地包含任意文件。进一步地攻击者可通过注入代码到特定文件...

408582708
31分钟前
1
0
PyTorch可视化理解卷积神经网络

摘要: 神经网络工具像一个黑匣子,无法知道它的中间是如何处理的。本文使用图片加代码的形式讲解CNN网络,并对每层的输出进行可视化,便于初学者理解,可以动手实践下哦! 如今,机器已经能...

阿里云官方博客
43分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部