七、HTML基础之表格

7.1 建立表格

7.1.1 添加表格——table、tr、td

表格一半通过3个标记来构建，分别是表格标记、行标记和单元格标记。表格标记<table></table>，表格的其他属性在<table></table>之内才有效。

语法：<table>

         <tr>

           <td>单元格内的文字</td>

           <td>单元格内的文字</td>

            ....

         <tr>

        <tr>

           <td>单元格内的文字</td>

           <td>单元格内的文字</td>

            ....

         <tr>

        .....

        </table>

7.1.2 表格的标题——caption

表格中除了<td>可以用来设置表格的单元格外，还可以通过caption来设置标题单元格，位于表格第一行，如同在表格上方加一个没有边框的行。

语法：<caption>表格的标题</caption>

7.1.3 表格的表头——th

表格的表头与<td>标记使用方法相同，但是表头是加粗显示的

语法：<table>

         <tr>

           <th>单元格内的文字</td>

           <th>单元格内的文字</td>

            ....

         <tr>

        <tr>

           <td>单元格内的文字</td>

           <td>单元格内的文字</td>

            ....

         <tr>

        .....

        </table>

7.2 表格基本属性

7.2.1 表格宽度——width

默认情况下，表格的宽度是与表格内的文字相关的。

语法：<table width=表格宽度>

说明：宽度的值可以是具体的像素数，也可以设置为浏览器的百分比数。

7.2.2 表格高度——height

语法：<table height=表格高度>

7.2.3 对齐方式——align

语法:<table align=”表格对齐方式”>

说明：align可以取值为left、center、right

7.3 表格的边框

7.3.1 表格的边框宽度——border

默认情况下，表格不显示边框。

语法：<table border=边框宽度>

说明：设定不为0的值，表格的边框才会显示，单位为像素。

7.3.2 边框颜色——bordercolor

默认情况下，边框的颜色为灰色，设置颜色的前提是border的值不为0

语法：<table border=边框宽度
bordercolor=”边框颜色”>

说明：颜色为16位颜色代码

7.3.3 内框宽度——cellspacing

内框宽度指的是表格内部各个单元格之间的宽度

语法：<table cellspacing=内框宽度>

说明：单位为像素

7.3.4 表格内文字与边框距离——cellpadding

默认情况下，表格内的文字会紧贴表格的边框

语法：<table cellpadding=文字与边框的距离值>

7.4 设定表格背景

7.4.1 表格背景色——bgcolor

语法：<table bgcolor=”颜色代码”>

7.4.2 表格背景图像——background

语法:<table background=”背景图片的地址”>

说明：地址可以为绝对地址也可以为相对地址

7.5 修改表格的行属性

7.5.1 高度的控制——height

语法：<tr height=表格中某行高度>

说明：只对设置的这一行有效

7.5.2 边框颜色 

对表格的行来说，也可以单独设置其外框颜色

语法：<tr bordercolor=”颜色代码”>

7.5.3 行背景——bgcolor、background

行的背景也可以单独设计

语法：<tr bgcolor=”颜色代码”>

7.5.4 行文字的水平对齐方式——align

表格中也可以为单独的一行设置特殊的对齐方式

语法：<tr align=”水平对齐方式”>

说明：水平对齐方式包括3种，left、center、right

7.5.5 行文字的垂直对齐方式——valign

语法：<tr valign=”垂直对齐方式”>

说明：垂直对齐方式包括3种，top、middle、bottom

7.5.6 表格标题的垂直对齐方式——valign

表格标题是一种特殊的行，水平对齐方式与行文字相同，垂直对齐指的是标题位于表格的上方或者下方。

语法：<caption valign=”垂直对齐方式”>表格的标题</caption>

说明：垂直对齐方式取top或者bottom

7.6 调整单元格属性

7.6.1 单元格大小——width、height

默认情况下，单元格的大小会根据内容自动调整

语法：<td width=单元格宽度
height=单元格高度>

说明：单位是像素，而且对一个单元格的设置往往会影响多个单元格

7.6.2 水平跨度——colspan

有的单元格是跨多个列

语法：<td colspan=跨的列数>

7.6.3 垂直跨度——rowspan

语法：<td rowspan=跨的行数>

7.6.4 对齐方式——align、valign

语法：<td align=”水平对齐方式” valign=”垂直对齐方式”>

7.6.5 单元格的背景颜色

语法：<td bgcolor=”颜色代码”>

7.6.6 单元格的边框颜色

语法：<td bordercolor=”颜色代码”>

7.6.7 单元格的亮边框——bordercolorlight

语法：<td bordercolorlight=”颜色代码”>

7.6.8 单元格的暗边框——bordercolordark

语法：<td bordercolordark=”颜色代码”>

7.6.9 单元格的背景图像

语法：<td background=”背景图片的地址”>

说明：地址可以是绝对地址也可以是相对地址

7.6.10 文章内容不换行——nowrap

当单元格内容过长时，会自动换行。

语法：<th nowrap>    

     <td nowrap>

说明：既可以设置在表格标题中，也可以设置在普通单元格中

7.7 表格的结构

除了对表格的设计标记外，还有一些标记是用来明确表格结构的。使用这些标记能对表格的一行或者多行单元格属性进行统一修改。

7.7.1 设计表头样式——thead

用于定义表格最上端表首的样式

语法：<thead bgcolor=”颜色代码” align=”水平对齐方式”>

     ............

      </thead>

7.7.2 表主体样式——tboby

与表头样式的标记功能类似，表主体样式用来统一设计表主体部分的样式。

语法：<tbody bgcolor=”颜色代码” align=”水平对齐方式”>

     ............

      </tbody>

7.7.3 表尾样式——tfoot

语法：<tfoot bgcolor=”颜色代码” align=”水平对齐方式”>

     ............

      </tfoot>

7.8 表格的嵌套

不再赘述，相似于列表的嵌套

7.9 层标记——div

也可称为区隔标记，在排版方面与表格有着相似的功能，但是层能够完成更加复杂、更加灵活的排版效果。

语法：<div id=值
align=对齐方式
style=样式
class=应用的样式类></div>

说明：id用来标识层；align用来设定层内元素的对齐方式，包括左对齐、右对齐和居中对齐；style则用来设定层的属性，包括层的大小范围和起始位置；class用于定义层所应用的CSS样式。