您的位置：首页 > Web前端 > CSS

【阅读】《Head First HTML 与 CSS》第十三章——表格与更多列表

2014-08-16 08:52 711 查看

如何建立表格

<body>
<table border="1px">
<tr>
<th>上午</th>
<th>下午</th>
<th>晚上</th>
</tr>
<tr>
<td>吃早饭</td>
<td>吃中餐</td>
<td>是晚餐</td>
</tr>
</table>
</body>

<table>：创建一个表格
<tr>创建一行
<th>这是表头，它默认会加粗
<td>这是一个单元格
不需要指定表的每一列，它会通过有多少个<td>来了解有多少列，它是指浏览器，如果你少了一个<td>，后面的<td>就会补上来
比较奇怪的是<th>是表头，但是这个表头不一定在一列（或一行中），它可以想这样→

注意：HTML表格虽然也能够达到CSS表格那样使div对齐，但是最好不要这样，还是用CSS比较好，毕竟CSS是负责样式的
有具体的数据的时候用HTML表格，要对齐块元素的时候用CSS表格

为表格增加一个标题

<caption>
一天一天
</caption>

注意：这个标题默认是不在表格的框框里的

去除默认的双线条边框

当我们这样写的时候：

table {
border:thin solid black;
margin-left:20px;
margin-right:20px;
}
th, td {
border:thin dotted black;
padding:5px;
}

所达到的效果是这样的

有没有什么办法能够让双线条变成单线条呢？
答案：在table中加上border-collapse:collapse;就可以了

给表格一点颜色看看

在CSS中加上：

th {
background-color:#8282FF;
}
.colro {
background-color:#FFA579;
}

并且在双数的行中加上class="color"就可以达到这样的效果：

这也是常见的表格增加颜色的效果，可以让读者更清楚的区分各列
不过添加class的方法并不是最好的方法，因为这样做拓展性不好，如果要增加一列，或是减少一列那就要改很多了，所以还有一个更好的方法
把.color改成

tr:nth-child(odd) {
background-color:#FFAE88;
}

其中nth-child是一个定位到指定子元素的伪类，在括号中加odd意思是奇数（odd）个子元素都采用这个背景，还可以用偶数（even）
奇数和偶数还可以这样表示2n代表偶数，2n+1代表奇数
有意思的是：表格的表头并没有变成别的颜色，还是CSS中指定的颜色，这是因为表头的CSS的指向范围更加小一些

跨多行的单元格

<table>
<caption>
一天一天
</caption>
<tr>
<th>上午</th>
<th>下午</th>
<th>晚上</th>
</tr>
<tr>
<td rowspan="2">吃早饭</td>
<td>吃中餐</td>
<td>是晚餐</td>
</tr>
<tr class="colro">

<td rowspan="2">吃中餐</td>
<td>是晚餐</td>
</tr>
<tr>
<td>吃早饭</td>

<td rowspan="2">是晚餐</td>
</tr>
<tr class="colro">
<td>吃早饭</td>
<td>吃中餐</td>

</tr>
</table>

效果是这样的：

表格里嵌套表格

<tr>
<td>吃早饭</td>
<td>吃中餐</td>
<td>
<table>
<tr>
<th>9点</th>
<th>10点</th>
</tr>
<tr>
<td>吃</td>
<td>拉</td>
</tr>
</table>
</td>
</tr>

效果就是这样：

列表标记

<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>

效果：

默认的列表符是一个小豆豆，你也可以改成正方形或是中空的豆豆，甚至是指定的图片通过list-style-type修改列表的符号，通过list-style-images指定列表符的图片
关于line-style-position:如果它的值是inside就是这样的

如果是outside就是这样的

注意哈~那个红框框是我自己加上去的，意思就是inside就是说列表符号在列表项里面，outside就是在外面

BULLET POINTS

HTML表格用来建立表格数据结构
HTML表格元素<table>、<tr>、<th>和<td>一起来创建一个表格
<table>元素定义并包围整个表格
表格使用<tr>元素来定义行
每行包含一个或者多个数据单元格，分别用<td>来定义
使用<th>元素表示作为行或者列的表头的数据单元格
表格采用格状布局。每行对应HTML中的一个<tr>.....</tr>行，每列对应行中的<td>.....<td>内容
可以用<caption>元素提供关于表格的额外信息
表格有边框间距，也就是单元格之间的间距
表格数据单元格还可以有内边距和边框
就像能够控制元素的内边框、边框和外边框一样，可以用CSS控制表格单元格的内边距、边距和边距间距
border-collapse是针对表格的一个特殊的CSS属性，允许将单元格边框合并为一个边框，让外观更简洁
可以用background-color属性为表格增加颜色。可以为整个表格、各行或者单个的数据单元格增加背景颜色
使用CSS nth-child伪类可以为表格隔行增加背景颜色
如果一个数据单元格没有数据，<td>元素中不放置任何内容。不过，需要使用一个<td>...</td>元素维持表格的对齐
如果你的数据单元格要跨多行或多列，可以使用<td>元素的rowspan或colspan属性
可以在表格中嵌套表格，将<table>元素及其所有内容放在一个数据单元格中
表格应当用于表格数据，而不是建立页面布局。另一方面，可以像第11章所介绍的，使用CSS表格显示创建多栏页面布局
与所有其他元素一样，可以用CSS指定列表的样式。有几个特定于列表的CSS属性，如list-style-type和list-style-image
list-style-type允许改变列表中使用的列表标记类型
list-style-image允许指定列表标记图像

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html

相关文章推荐

新的分享

章节导航