Head First HTML与CSS

第十一章 布局与定位

CSS——掌控页面的表现

CSS表格显示

CSS表格显示允许你在一个有行和列的表格中显示块元素，通过将内容放在CSS表格中，可以很容易地用HTML与CSS创建多栏设计。

对于CSS表格显示，每个单元格会包含一个HTML块元素。

关于HTML结构的增加，做法很简单，只需要为整个表格创建一个<div>，然后为每一行分别创建一个<div>，并在各行中的每一列放置一个块元素（不需要再创建<div>）。具体步骤如下：

1.创建一个<div>表示整个表格，行和列嵌套其中。

2.对表格的每一行创建一个<div>，其中包含行内容。

3.对于每一列，只需要一个块元素作为该列内容。

接下来在CSS中分别对各个元素指定表格样式。具体步骤如下：

1.为表格增加一个<div>,id为“tableContainer”。这个<div>包含行和列。如下指定"tableContainer"<div>的样式：

div#tableContainer{

display:table;/*注意，对于整个表格结构div的样式均要这样指定*/

border-spacing:10px;/*该属性为表格中的单元格增加10像素的边框间距，可看作是常规元素的外边距，这样就就不需要再为单元格块元素指定外边距*/

}

2.为每行增加一个<div>，id为“tableRow”（单行使用id，如果是多行，可以考虑使用类，这样可以一个规则指定所有行的样式）：

div#tableRow{

display:table-row;/*注意，对于表格中的行div的样式均要这样指定*/

}

3.使用现有的“main”和“sidebar”<div>作为单元格，对应于行中的各列。这些<div>的样式指定如下（只需要在原有的样式基础上增加“display:table-cell;”属性）：

#main{

display:table-cell;/*注意，对于表格单元格中的块元素的样式均要这样指定*/

background:#efe5d0 url(images/background.gif) top left;

font-size:105%;

padding:15px;

vertical-align:top;/*确保表格的该单元格中的内容相对于单元格上边对齐*/

}

#sidebar{

display:table-cell;/*注意，对于表格单元格中的块元素的样式均要这样指定*/

background:#efe5d0 url(images/background.gif) bottom right;

font-size:105%;

padding:15px;

vertical-align:top;/*确保表格的该单元格中的内容相对于单元格上边对齐*/

}

效果如下：

注意：单元格之间的外边距会折叠，但是border-spacing和外边距创建的空间不会折叠。因此页面主体部分和页脚、页眉之间的间距为20px。通过修改页眉的下外边距、页脚的上外边距为0，可以修正。修正后如下：

若要再为表格增加一列，只需要在表格<div>中的某行插入一个新的块元素作为单元格即可。

注意：

1.HTML表格与CSS表格不同。CSS表格显示只是使用一种类似表格的布局来表现这个结构中的内容，而HTML表格则是建立数据的结构。

2.为每个单元格都增加vertical-align:top;，是为了确保所有内容都与单元格上边对齐。垂直对齐方式有三种：top顶端对齐，middle中间对齐，bottom底端对齐。

3.用width属性可以控制列的宽度，如width:20%;就是指定这一列的宽度为本行的20%。

---

继电脑坏了之后二十多天没有写笔记了。。。尴尬。