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>包含。代码如下:

<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,用于文本换行的时候,文本是换在项目符号下面还是换在文本的下面。






posted @ 2018-12-12 16:24  FBshark  阅读(159)  评论(0编辑  收藏  举报