HTML 第十三章总结

前言

这一章的内容主要是处理 HTML 中的 tabular data,可以分为三个部分：

1. 如何在 HTML 中创建表格
2. 如何在 CSS 中 style 表格
3. 如何在 CSS 中 style HTML‘ lists

Creating a table with HTML 使用<table><tr><tb>和<th>

表格中，包括了row，colom,cell还有表头。在 HTML 中，是通过以 row 的方式来 specify 表格的，然后一行中的 cell 的数量决定了列的数量。
在代码中，表格以<table>开头，然后每一行为 <tr>，代表了一行，在<tr>中包含着很多 cells， 也就是 table data. 用<tb>来包含其内容。其中的表头用<th>包含。代码如下：

?

1 2 3 4 5 6 7 8 9 10 11 12 13

<table> <caption>     The cities I have visited on my     Segway'n USA travels </caption>     <tr>         <th>City</th>         <th>Date</th>         <th>Temprature</th>         <th>Altitude</th>         <th>Population</th>         <th>Diner Rating</th>     </tr>

 

其中的 用于标明题注，默认位置在表格的上方，可以在 CSS 中更改其位置。

How to style the table

在进行 style 之前，需要先知道 ,的工作原理：它们具有 box model 的特性，同样具有 content,padding 和 border，但是有一点不同的是，它没有 margin 这个 property，取而代之的是 border-spacing 这个数值。

border-collapse

如果想要使得两个 border 合并，可以使 borer-spaing的 value 为 0px; 也可以采用另外一个property,它的名字叫做 border-collapse,
可以这样设置：
table{
border-collapse:collapse;
}

如何设置表格中行的颜色，如何设置对齐

这个可以采用定义 class 的方法来解决，对于设置行的颜色，有一个更好的设置的办法，那就是利用一个 psedo-class ，它的名字叫做 nth-child。
child 的含义是 HTML 中包含在一个元素中的元素，nth-child 这个参数用来表示 the numerical order of an element in relation to its siblings elements.
比如，想要使得表格中的奇数行或者偶数行变成不同的颜色，可以这样：
tr:nth-child(odd){
background-color:#fcba7a;
}
中的 nth-child(odd)写成 nth-child(2n+1)的格式。

rowspan,colspan 参数

如果有相同的信息，可以将两行信息合并成一行，这里就会用到 rowspan 参数，其设置的方法如下：

当设置了之后，那么在下一个 元素中的对应的 元素的位置就不需要进行任何的设置了。
同样，对于列来说，也有 colspan 参数

在表格中嵌套表格

可以在<td>中间嵌套<table>

 

关于 CSS 中的 list

关于 list ，可以对中的 markers 进行设置，设置的参数有：

• list-type-style:对于 ol 和 ul 有不同的参数，ul 有disc,circle,square和none,对于 ul 有decimal,upper-alpha,lower-alpha,upper-roman,lower-roman,其用于设置 built-in marker.
• list-type-image:url(images/backpack.gif")用来设置一个图片作为项目符号
• list-style-positon:有两个参数，inside 和 outside,用于文本换行的时候，文本是换在项目符号下面还是换在文本的下面。