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

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    浅谈html table 标签
    主要讨论它的结构和一些重要的属性。我将使用一种慢慢改善的方式介绍它。
    1)基本的结构如下:<tr>表示表格中的一行,<td>表示一行中的一列。说一列,其实可以
    把它想象成word中的单元格。<th>实际上也是单元格,只不过它用作表格标题。从语义上来
    说:<td>标示表格中的数据单元,<th>表示表格中一列或者是一行的标题。

    复制代码
    代码如下:

    <table>
    <tr><th></th></tr>
    <tr><td><td></tr>
    </table>

    2)一个标题,可能是行标题,也可能是列标题,如何区分?需要使用scope属性scope=row/col。


    复制代码
    代码如下:

    <table>
    <tr><th scope="col"></th></tr>
    <tr><td><td></tr>
    </table>

    3)表格也有自己的标题<caption>

    复制代码
    代码如下:

    <table>
    <caption>表格标题</caption>
    <tr><th scope="col"></th></tr>
    <tr><td><td></tr>
    </table>

    4)给表格添加简介summary属性

    复制代码
    代码如下:

    <table summary="这是一个表格的内容简介">
    <caption>表格标题</caption>
    <tr><th scope="col"></th></tr>
    <tr><td><td></tr>
    </table>

    5)表格边框模型和单元格默认padding。
    表格边框有两种显示方式:分离和合并。border-collapse: separate/collapse IE6默认的样式是
    分离的,看起来像立体的。实际上,不过是每个单元格都有自己独立的边框。合并则是共享边框。
    table { border-collapse: collapse; }
    单元格之间默认是有空白的,可以用border-spacing控制它,因为IE6不支持,所以很少用到。IE6
    使用cellspacing。

    复制代码
    代码如下:

    <table summary="这是一个表格的内容简介" cellspacing="0">
    <caption>表格标题</caption>
    <tr><th scope="col"></th></tr>
    <tr><td><td></tr>
    </table>

    6)添加一些行和列。并给每一个<th>添加一个id。

    复制代码
    代码如下:

    <table summary="这是一个表格的内容简介" cellspacing="0">
    <caption>表格标题</caption>
    <tr>
    <th scope="col" id="name">姓名</th>
    <th scope="col" id="address">地址</th>
    <th scope="col" id="databirthday">出生日期</th>
    </tr>
    <tr>
    <td>ewee<td>
    <td>hubei<td>
    <td>19870102<td>
    </tr>
    <tr>
    <td>rewe<td>
    <td>wuhan<td>
    <td>419880103<td>
    </tr>
    <tr>
    <td>ertww<td>
    <td>yichang<td>
    <td>19870205<td>
    </tr>
    </table>

    7)对表格进行逻辑划分 <thead><tbody><tfoot>,把表格分成多个逻辑区域后,可以用CSS更好
    的控制表现。

    复制代码
    代码如下:

    <table summary="这是一个表格的内容简介" cellspacing="0">
    <caption>表格标题</caption>
    <thead>
    <tr>
    <th scope="col" id="name">姓名</th>
    <th scope="col" id="address">地址</th>
    <th scope="col" id="databirthday">出生日期</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>ewee<td>
    <td>hubei<td>
    <td>19870102<td>
    </tr>
    <tr>
    <td>rewe<td>
    <td>wuhan<td>
    <td>419880103<td>
    </tr>
    <tr>
    <td>ertww<td>
    <td>yichang<td>
    <td>19870205<td>
    </tr>
    <tbody>
    </table>

    我的这篇随笔只简单讲一讲表格的结构,希望有用。
    上一篇:Shtml 精简教程
    下一篇:html Frame、Iframe、Frameset 的区别
  • 相关文章
  • 

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

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

    浅谈html table 标签 浅谈,html,table,标签,浅谈,