博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
《Head first HTML与CSS 第二版》读书笔记 第十三章 表格和列表
阅读量:7305 次
发布时间:2019-06-30

本文共 1020 字,大约阅读时间需要 3 分钟。

hot3.png

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表示文本本身回绕。

 

转载于:https://my.oschina.net/u/2453016/blog/729064

你可能感兴趣的文章
《R语言数据挖掘:实用项目解析》——第2章,第2.10节小结
查看>>
input file上传图片预览
查看>>
spirngBoot 常用注解
查看>>
NodeJS:将文件夹按照存放路径变成一个对应的JSON
查看>>
《从0开始学Elasticsearch》—集群健康和索引管理
查看>>
mac上安装virtualenvwrapper 找不到.bashrc怎么做
查看>>
input 的placeholder不显示如何解决
查看>>
swift-4简单的分支和三目的写法
查看>>
小葵花妈妈课堂开课了:《Runnable、Callable、Future、RunnableFuture、FutureTask 源码分析》...
查看>>
【译】在 React 组件中使用 Refs 指南
查看>>
redis映射
查看>>
Java程序员必须掌握的Spring依赖管理原理
查看>>
程序员才能看懂的动图
查看>>
关于HTTP几个请求头含义
查看>>
关于canvas中加载第三方字体问题
查看>>
基于 Zxing 封装的 Hndxing 扫码库
查看>>
Java设计模式-观察者模式
查看>>
《Miss Talk》第03期:对话学霸君吴凯
查看>>
用 node 实现 交互下载 腾讯视频
查看>>
[MySQL光速入门]029 数据库管理和维护
查看>>