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%。
继电脑坏了之后二十多天没有写笔记了。。。尴尬。
