登录|注册
关于我们手机版

详解HTML表格

发布人: F.L.Y
分类: 数据恢复
认证: 手机短信验证
联系: F.L.Y (商家)
温馨提示:
1. 本资讯为 “好网角商讯” 注册用户上传发布,仅供参考之用,好网角商讯仅提供信息存储发布平台。不代表本站任何观点,请谨慎辨别。
2. 若有电话、微信等联系方式请务必辨别清楚,谨防上当受骗。
3. 如发现不良信息、或涉嫌欺诈、侵权,请举报或发送到邮箱:374524223@qq.com。
  • 详情
  • 作用:数据的展示,表格应用场景.

    <table>表格 <tr>行 <td>单元格

    格式:

    <table>
    
      <caption>...</caption><!-表格标题,居中显示-->
    
      <tr>
    
        <th>...</th>... <!-表格头,内容居中,加粗显示--> 
    
      </tr>
    
      <tr>
    
        <td>...</td>...
    
      </tr>
    
    </table>

    表格结构标签:加载一部分 显示一部分 更加便利.

    划分三部分:表头(thead),主体(tbody),脚注(tfoot)这三个标签不能影响布局

    <table>
    
      <caption>...</caption>
    
      <thead>
    
      <tr>
    
        <th>...</th>... <!-表格头,内容居中,加粗显示--> 
    
      </tr>
    
      </thead>
    
      <tbody>
    
      <tr>
    
        <td>...</td>...
    
      </tr>
    
      </tbody>
    
      <tfoot>
    
      <tr>
    
        <td>...</td>...
    
      </tr>
    
      </tfoot>
    
    </table>

    table标签属性

    tr 标签属性

    <table>
    
    
      <tr>
    
        <td colspan="2"> ...</td>
    
        <td> ...</td>
    
      </tr>
    
       <tr>
    
        <td>...</td>
    
        <td>...</td>
    
        <td>...</td>
    
      </tr>
    
    </table>

    <table>
    
      <tr>
    
        <td> ...</td>
    
        <td rowspan="2"> ...</td>
    
      </tr>
    
       <tr>
    
        <td>...</td>
    
        <td>...</td>
    
        <td>...</td>
    
      </tr>
    
    </table>

    说明:1.完整表格结构 2.放到<td>标签中

    <table>
    
      <tr>
    
        <td> ...</td>
    
        <td>  
    
          <table>
    
            <tr>
    
              <td> ...</td>
    
              <td>.</td>
    
            </tr>
    
          </table>
    
        </td>
    
      </tr>
    
    </table>

    1.尽量少的使用表格嵌套。

    2.尽量少的使用表格跨行跨列 。

    增加代码的整体维护成本 。

    使用表格进行网页结构布局一般不设置border

    本文是由小白站长网原创,转载请注明http://www.jiaocheng88.com.cn/HTML_JC/33131.html

    TOP 
  • 免费留言
  • 留言内容:
  • 我的称呼:
     
  • *手机号码:
     
  • *验证码
       点击获取验证码      看不清楚?换张图片
  •  

更多商讯

 

商讯手机触屏版
m.sx.wang1314.com