首页 > 代码库 > HTML学习笔记3—表格

HTML学习笔记3—表格

  一、格式:

    <table>

    <caption>表格的标题</caption>

<tr>

    <th>标题栏</th>

    <th>标题栏</th>

    <th>标题栏</th>

</tr>

<tr>

    <td>第一列</td>

    <td>第二列</td>

    <td>第三列</td>

</tr>

<tr>

    <td>第一列</td>

    <td>第二列</td>

    <td>第三列</td>

</tr>

<tr>

    <td>第一列</td>

    <td>第二列</td>

    <td>第三列</td>

</tr>

    </table>

    <table></table>用来声明表格开始与结束

    <tr>…</tr>用来设置表格的行

    <th>…</th>用来设置标题栏位

    <td>…</td>用来设置表格的列

  二、表格的属性

    1.<table>标签下的属性

        属性名称           属性值             说明

        border             像素             设置表格的外边线

        cellspacing        像素/百分比      设置存储格框线宽度

        cellpadding        像素/百分比      设置数据与框线的距离

        width              像素/百分比      设置表格宽度

        height             像素/百分比      设置表格高度

        align              left             表格左对齐(默认)

                           center           表格往中靠

                           right            表格网右靠

        bgcolor            英文/十六进制    表格的背景颜色

        background         URL              表格的背景图片

        bordercolor        英文/十六进制    边框的颜色

        bordercolorlight   同上             边框的亮色

        bordercolordark    同上             边框的暗色

     2.<tr><th><td>标签下的常用属性

        属性名称           属性值             说明

        width              像素/百分比       设置宽度

        height             像素/百分比       设置高度

        bgcolor            英文/十六         数据栏的颜色设置

        align(水平)        left              数据靠左对齐

                           center            数据居中对齐

                           right             数据靠右对齐

        valign(垂直)       top               数据靠上对齐

                           middle            数据居中对齐

                           bottom            数据靠下对齐

                           nowrap            不在单元格中换行

     3.合并单元格

        属性名称           属性值            说明

        colspan            数字         向两边扩展栏位

        rowspan            数字         向下扩展栏位

        如:<th colspan="2">合并当前单元格和右边的单元格

            <td rowspan="5">合并当前单元格和当前单元格下面的四个单元格

     4.<caption>标签下的常用属性

        属性名称          属性值         说明

        align              top          标题在表格上方

                           bottom       标题在表格下方


本文出自 “Raffaele” 博客,请务必保留此出处http://raffaele.blog.51cto.com/6508076/1553943

HTML学习笔记3—表格