全方位介绍HTML表格属性

HTML表格用table> 表示。一个表格可以分成很多行(row)，用tr> 表示；每行又可以分成很多单元格(cell)，用td> 表示。

这三个Tag是创建表格最常用的Tag。

html>
    body>
    p>
    表格所用到的Tag：整个表格开始要用table；每一行开始要用tr；每一单元格开始要用td。/p>
    h4>
    只有一行(Row)一列(Column)的表格/h4>
    table border="1">
    tr>
    td>
    100/td>
    /tr>
    /table>
    h4>
    一行三列的表格/h4>
    table border="1">
    tr>
    td>
    100/td>
    td>
    200/td>
    td>
    300/td>
    /tr>
    /table>
    h4>
    两行三列的表格/h4>
    table border="1">
    tr>
    td>
    100/td>
    td>
    200/td>
    td>
    300/td>
    /tr>
    tr>
    td>
    400/td>
    td>
    500/td>
    td>
    600/td>
    /tr>
    /table>
    /body>
    /html>
    

border属性

在缺省情况下，如果不设置表格的边界，表格是不显示边界的。

html>
    body>
    h4>
    缺省情况下，表格没有边界。/h4>
    table>
    tr>
    td>
    100/td>
    td>
    200/td>
    td>
    300/td>
    /tr>
    tr>
    td>
    400/td>
    td>
    500/td>
    td>
    600/td>
    /tr>
    /table>
    h4>
    表格Border设为0，也不显示边界：/h4>
    table border="0">
    tr>
    td>
    100/td>
    td>
    200/td>
    td>
    300/td>
    /tr>
    tr>
    td>
    400/td>
    td>
    500/td>
    td>
    600/td>
    /tr>
    /table>
    /body>
    /html>
    

要显示表格的边界，可使用border这个属性。

html>
    body>
    h4>
    表格的边界值设为1：/h4>
    table border="1">
    tr>
    td>
    第一/td>
    td>
    行/td>
    /tr>
    tr>
    td>
    第二/td>
    td>
    行/td>
    /tr>
    /table>
    h4>
    表格的边界值设为8，边界更粗：/h4>
    table border="8">
    tr>
    td>
    第一/td>
    td>
    行/td>
    /tr>
    tr>
    td>
    第二/td>
    td>
    行/td>
    /tr>
    /table>
    h4>
    表格的边界值设为15，边界更粗：/h4>
    table border="15">
    tr>
    td>
    第一/td>
    td>
    行/td>
    /tr>
    tr>
    td>
    第二/td>
    td>
    行/td>
    /tr>
    /table>
    /body>
    /html>
    

表格的表头

用th> 来表示表格的表头，表头的字是粗体显示的。

html>
    body>
    h4>
    有表头的表格：/h4>
    table border="1">
    tr>
    th>
    姓名/th>
    th>
    电话/th>
    th>
    传真/th>
    /tr>
    tr>
    td>
    Bill Gates/td>
    td>
    555 77 854/td>
    td>
    555 77 855/td>
    /tr>
    /table>
    h4>
    竖直方向的表头：/h4>
    table border="1">
    tr>
    th>
    姓名/th>
    td>
    Bill Gates/td>
    /tr>
    tr>
    th>
    电话/th>
    td>
    555 77 854/td>
    /tr>
    tr>
    th>
    传真/th>
    td>
    555 77 855/td>
    /tr>
    /table>
    /body>
    /html>
    

空的单元格

如果表格的单元格td> /td> 之间没有内容，那么这个单元格的边界是不会被显示出来的，尽管整个表格已设置边界值。要显示这个单元格的边界，可以插入一个& nbsp; 空格符。

html>
    body>
    table border="1">
    tr>
    td>
    Some text/td>
    td>
    Some text/td>
    /tr>
    tr>
    td>
    /td>
    td>
    Some text/td>
    /tr>
    /table>
    p>
    上面的表格中，有一个单元格里是没有任何内容的，这个空的单元格没有显示边界，虽然整个表格设了边界值。/p>
    table border="1">
    tr>
    td>
    Some text/td>
    td>
    Some text/td>
    /tr>
    tr>
    td>
    &
    nbsp;
    /td>
    td>
    Some text/td>
    /tr>
    /table>
    p>
    上面的例子，你可以看到，给这个单元格加上一个空格符号之后，单元格的边界就显示出来了。/p>
    p>
    注意：空格符要用&
    bsp;
    表示。&
    nbsp;
    是一个HTML特别字符，参见HTML特别字符(HTML Character EntITies)。/p>
    /body>
    /html>
    

更多示例

html>
    body>
    h4>
    这个表格有标题：/h4>
    table border="6">
    caption>
    表格标题/caption>
    tr>
    td>
    100/td>
    td>
    200/td>
    td>
    300/td>
    /tr>
    tr>
    td>
    400/td>
    td>
    500/td>
    td>
    600/td>
    /tr>
    /table>
    /body>
    /html>
    

这个示例演示如何用caption> 在一个表格上加上标题。

html>
    body>
    table border="1">
    tr>
    td>
    p>
    这是一段/p>
    p>
    这是另外一段。/p>
    /td>
    td>
    这个单元格里包含了一个表格：table border="1">
    tr>
    td>
    A/td>
    td>
    B/td>
    /tr>
    tr>
    td>
    C/td>
    td>
    D/td>
    /tr>
    /table>
    /td>
    /tr>
    tr>
    td>
    这个单元格里包含了一个图片：img src = "../images/html_tutorials/mail.gif">
    /td>
    td>
    HELLO/td>
    /tr>
    /table>
    /body>
    /html>
    

以上就是全方位介绍HTML表格属性的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！