前言

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

如何在 HTML 中创建表格

如何在 CSS 中 style 表格

如何在 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>包含。代码如下：


     
      
           The cities I have visited on my     Segway'n USA travels
                                       City                 Date                 Temprature                 Altitude                 Population                 Diner Rating

其中的用于标明题注，默认位置在表格的上方，可以在 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,用于文本换行的时候，文本是换在项目符号下面还是换在文本的下面。

转载于:https://www.cnblogs.com/FBsharl/p/10109086.html

你可能感兴趣的文章

前言