4.表格标签和传统布局

一。表格

1.<table>标签：声明一个表格，它的常用属性如下：

a。border属性  定义表格的边框，设置值是数值

b。cellpadding属性   定义单元格内容与边框的距离，设置值是数值

c。cellspacing属性   定义单元格与单元格之间的距离，设置值是数值

d。align属性   设置整体表格相对于浏览器窗口的水平对齐方式，设置值有：left     center    right

 

2.<tr>标签：定义表格中的一行

 

3.<td>和<th>标签 ：  定义一行中的一个单元格，td代表普通单元格，th表示表头单元格，它们的常用属性如下：

a。align   设置单元格中内容的水平对其方式，设置值有 ：left    center   right

b。valign   设置单元格中内容的垂直对其方式 ，设置值有：top（靠上面顶部对齐）   middle    bottom

c。colspan   设置单元格水平合并，设置值是数值

d。rowspan    设置单元格垂直合并，设置值是数值

练习：

二。页面布局

    布局也可以叫做排版，它指的是把文字和图片等元素按照我们的意愿有机地排列在页面上，布局的方式分为两种：

1.table布局：通过table元素将页面空间划分成若干个单元格，将文字或图片等元素放入单元格中，隐藏表格的边框，从而实现布局。这种布局方式也叫传统布局，目前主要使用在EDM（广告邮件中的页面）中，主流的布局方式不用这种。

2.HTML+CSS布局（DIV+CSS）：主要通过CSS样式设置来布局文字或图片等元素，需要用到CSS盒子模型，盒子类型，CSS浮动，CSS定位，CSS背景图定位等知识来布局，它比传统的布局要复杂，目前是主流的布局方式。

 

table来做整体页面的布局，布局的技巧归纳为如下几点：

1.按照设计图的尺寸设置表格的宽度以及单元格的宽度。

2.将表格border等属性置为0，表格的边框和间距不占有空间，起到划分空间的作用。

3.针对局部复杂的布局，可以在单元格里面嵌套表格，嵌套表格划分局部的空间。

4.单元格中的元素或者嵌套的表格用align 和 valign设置对齐方式

5.通过属性或者css样式设置单元格中元素的样式