文档章节

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

一万
 一万
发布于 2016/08/07 10:36
字数 578
阅读 31
收藏 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表示文本本身回绕。

 

© 著作权归作者所有

共有 人打赏支持
一万
粉丝 28
博文 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 支持 :) 目录 第一章 块级绑定 第二章 字符串和正则表达式 ...

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

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

一万
2016/07/29
24
0

没有更多内容

加载失败,请刷新页面

加载更多

Shiro | 实现权限验证完整版

写在前面的话 提及权限,就会想到安全,是一个十分棘手的话题。这里只是作为学校Shiro的一个记录,而不是,权限就应该这样设计之类的。 Shiro框架 1、Shiro是基于Apache开源的强大灵活的开源...

冯文议
今天
1
0
linux 系统的运行级别

运行级别 运行级别 | 含义 0 关机 1 单用户模式,可以想象为windows 的安全模式,主要用于修复系统 2 不完全的命令模式,不含NFS服务 3 完全的命令行模式,就是标准的字符界面 4 系统保留 5 ...

Linux学习笔记
今天
2
0
学习设计模式——命令模式

任何模式的出现,都是为了解决一些特定的场景的耦合问题,以达到对修改封闭,对扩展开放的效果。命令模式也不例外: 命令模式是为了解决命令的请求者和命令的实现者之间的耦合关系。 解决了这...

江左煤郎
今天
3
0
字典树收集(非线程安全,后续做线程安全改进)

将500W个单词放进一个数据结构进行存储,然后进行快速比对,判断一个单词是不是这个500W单词之中的;来了一个单词前缀,给出500w个单词中有多少个单词是该前缀. 1、这个需求首先需要设计好数据结...

算法之名
昨天
15
0
GRASP设计模式

此文参考了这篇博客,建议读者阅读原文。 面向对象(Object-Oriented,OO)是当下软件开发的主流方法。在OO分析与设计中,我们首先从问题领域中抽象出领域模型,在领域模型中以适当的粒度归纳...

克虏伯
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部