• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营

    • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    表格(TABLE)标记(TAGS)详细介绍
    表格的基本语法

    <table>...</table> - 定义表格
    <tr> - 定义表行
    <th> - 定义表头
    <td> - 定义表元(表格的具体数据)

    带边框的表格： 


    复制代码
    代码如下:

    <table border>
    <tr><th>Food</th><th>Drink</th><th>Sweet</th>
    <tr><td>A</td><td>B</td><td>C</td>
    </table>
    Food Drink Sweet
    A B C


    不带边框的表格：

    复制代码
    代码如下:

    <table>
    <tr><th>Food</th><th>Drink</th><th>Sweet</th>
    <tr><td>A</td><td>B</td><td>C</td>
    </table>

    Food Drink Sweet
    A B C

     跨多行、多列的表元(Table Span)

    跨多列的表元 <th colspan=#>


    复制代码
    代码如下:

    <table border>
    <tr><th colspan=3> Morning Menu</th>
    <tr><th>Food</th> <th>Drink</th> <th>Sweet</th>
    <tr><td>A</td><td>B</td><td>C</td>
    </table>

    Morning Menu
    Food Drink Sweet
    A B C

    跨多行的表元 <th rowspan=#>



    复制代码
    代码如下:

    <table border>
    <tr><th rowspan=3> Morning Menu</th>
    <th>Food</th> <td>A</td></tr>
    <tr><th>Drink</th> <td>B</td></tr>
    <tr><th>Sweet</th> <td>C</td></tr>
    </table>
    Morning Menu Food A
    Drink B
    Sweet C

     表格尺寸设置

    <table border=#>

    边框尺寸设置： 


    复制代码
    代码如下:

    <table border=10>
    <tr><th>Food</th><th>Drink</th><th>Sweet</th>
    <tr><td>A</td><td>B</td><td>C</td>
    </table>
    Food Drink Sweet
    A B C

    <table border width=# height=#>

    表格尺寸设置： 


    复制代码
    代码如下:

    <table border width=170 height=100>
    <tr><th>Food</th><th>Drink</th><th>Sweet</th>
    <tr><td>A</td><td>B</td><td>C</td>
    </table>
    Food Drink Sweet
    A B C

    <table border cellspacing=#>

    表元间隙设置： 


    复制代码
    代码如下:

    <table border cellspacing=10>
    <tr><th>Food</th><th>Drink</th><th>Sweet</th>
    <tr><td>A</td><td>B</td><td>C</td>
    </table>
    Food Drink Sweet
    A B C

    <table border cellpadding=#>

    表元内部空白设置： 


    复制代码
    代码如下:

    <table border cellpadding=10>
    <tr><th>Food</th><th>Drink</th><th>Sweet</th>
    <tr><td>A</td><td>B</td><td>C</td>
    </table>
    Food Drink Sweet
    A B C

     表格内文字的对齐/布局

    <tr align=#>

    <th align=#> #=left, center, right

    <td align=#>

    复制代码
    代码如下:

    <table border width=160>
    <tr>
    <th>Food</th><th>Drink</th><th>Sweet</th>
    <tr>
    <td align=left>A</td>
    <td align=center>B</td>
    <td align=right>C</td>
    </table>

    Food Drink Sweet
    A B C

    <tr valign=#>

    <th valign=#> #=top, middle, bottom, baseline

    <td valign=#>

    复制代码
    代码如下:

    <table border height=100>
    <tr>
    <th>Food</th><th>Drink</th>
    <th>Sweet</th><th>Other</th>
    <tr>
    <td valign=top>A</td>
    <td valign=middle>B</td>
    <td valign=bottom>C</td>
    <td valign=baseline>D</td>
    </table>

    Food Drink Sweet Other
    A B C D

     表格在页面中的对齐/布局(Floating Table)

    <table align=left>


    复制代码
    代码如下:

    <table align="left" border>
    <tr><th>Food</th><th>Drink</th><th>Sweet</th>
    <tr><td>A</td><td>B</td><td>C</td>
    </table>

    My favorites...<br> cookies, chocolates, and more.
    Food Drink Sweet
    A B C

    My favorites...
    cookies, chocolates, and more.

    <table align=right>

    Food Drink Sweet
    A B C

    My favorites...
    cookies, chocolates, and more.

    <table vspace=# hspace=#> #=space value


    复制代码
    代码如下:

    <table align="left" border vspace=20 hspace=30>
    <tr><th>Food</th><th>Drink</th><th>Sweet</th>
    <tr><td>A</td><td>B</td><td>C</td>
    </table>

     My favorites...<br> cookies, chocolates, and more.
    Food Drink Sweet
    A B C

    My favorites...
    cookies, chocolates, and more.

     表格的标题

    <caption align=#> ... </caption> #=left, center, right

    复制代码
    代码如下:

    <table border>
    <caption align=center>Lunch</caption>
    <tr><th>Food</th><th>Drink</th><th>Sweet</th>
    <tr><td>A</td><td>B</td><td>C</td>
    </table>

    Lunch
    Food Drink Sweet
    A B C

    <caption valign=#> ... </caption> #=top, bottom

    valign=top is default.


    复制代码
    代码如下:

    <table border>
    <caption valign=bottom>Lunch</caption>
    <tr><th>Food</th><th>Drink</th><th>Sweet</th>
    <tr><td>A</td><td>B</td><td>C</td>
    </table>

    Food Drink Sweet
    A B C
    Lunch
    上一篇：html 隐藏div HTML里隐藏表格TABLE或者DIV内容的css样式
    下一篇：HTML相对路径(Relative Path)和绝对路径(Absolute Path)深入理解
  • 相关文章
    • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    表格(TABLE)标记(TAGS)详细介绍 表格,TABLE,标记,TAGS,详细,