20180614-前端系统学习-HTML之表格元素

表格元素

table

  • 表格数据

    --通过二维数据表表示的信息

    --不应该作为布局使用

  • 属性

    --border 可以为空字符串,可以为1。如果是1会有一个边框。

  • caption 表格的标题

    <table>
        <caption>照片冲印价格详情</caption>
        <thead>
            <tr>
                <th>相片尺寸</th>
                <th>富士</th>
                <th>柯达</th>
            </tr>
        </thead>
    </table>

colgroup

  • 表示表格中的一组列表
  • 属性

    --span 默认等于1,表示一列列表


    <table border="1">
        <colgroup span="2" width="50"> <!--前两列宽度为50像素-->
        </colgroup>
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
            </tr>
        </tbody>
    </table>

col

  • 定义列表上所有公共单元格上的公共语义
  • 属性

    --span


    <table border="1">
        <colgroup>
            <col width="50">  <!--第一列宽度为50像素-->
            <col span="2" width="100"> <!--第二三列列宽度为100像素-->
        </colgroup>
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
            </tr>
        </tbody>
    </table>

tbody

  • 一系列行数据
  • 子元素只能是tr
  • 可出现多个

    <table>
        <caption>照片冲印价格详情</caption>
        <thead>
            <tr>
                <th>相片尺寸</th>
                <th>富士</th>
                <th>柯达</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>6寸</th>
                <td>0.45</td>
                <td>0.6</td>
            </tr>
        </tbody>
    </table>

thead

  • 定义表格列头的行

tfoot

  • 定义表格列简介的行
    <table>
        <caption>照片冲印价格详情</caption>
        <thead>
            <tr>
                <th>相片尺寸</th>
                <th>富士</th>
                <th>柯达</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>6寸</th>
                <td>0.45</td>
                <td>0.6</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3">运费8元/单,满99元免运费</td>
            </tr>
        </tfoot>
    </table>


注意顺序是thead->tbody->tfoot, 哪怕手动改了顺序,仍按按照这个顺序读取。

tr

  • 表格中的行
    <table>
        <caption>照片冲印价格详情</caption>
        <thead>
            <tr>
                <th>相片尺寸</th>
                <th>富士</th>
                <th>柯达</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>6寸</th>
                <td>0.45</td>
                <td>0.6</td>
            </tr>
            <tr>
                <th>全景6寸</th>
                <td>0.45</td>
                <td>0.6</td>
            </tr>
            <tr>
                <th>7寸</th>
                <td>0.89</td>
                <td>1</td>
            </tr>
            <tr>
                <th>8寸</th>
                <td>1.69</td>
                <td>2</td>
            </tr>
            <tr>
                <th>10寸</th>
                <td>1.69</td>
                <td>2</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3">运费8元/单,满99元免运费</td>
            </tr>
        </tfoot>
    </table>

td

  • 表格中的单元格
  • 属性

    --colspan 跨了多少列

    --rowspan 跨了多少行

    --headers 和单元格相关的th的id

<table border="1" width="100%">
  <tr>
    <th id="name">Name</td>
    <th id="Email">Email</td>
    <th id="Phone">Phone</td>
    <th id="Address">Address</td>
  </tr>
  <tr>
    <td headers="name">Jack Chu</td>
    <td headers="Email">jack_chu@mail.com</td>
    <td headers="Phone">123456789</td>
    <td headers="Address">Nanjing</td>
  </tr>
</table>

td-colspan


    <table border="1">
        <caption>照片冲印价格详情</caption>
        <thead>
            <tr>
                <th>相片尺寸</th>
                <th>富士</th>
                <th>柯达</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>6寸</th>
                <td>0.45</td>
                <td>0.6</td>
            </tr>
            <tr>
                <th>全景6寸</th>
                <td>0.45</td>
                <td>0.6</td>
            </tr>
            <tr>
                <th>7寸</th>
                <td>0.89</td>
                <td>1</td>
            </tr>
            <tr>
                <th>8寸</th>
                <td>1.69</td>
                <td>2</td>
            </tr>
            <tr>
                <th>10寸</th>
                <td>1.69</td>
                <td>2</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3">运费8元/单,满99元免运费</td>
            </tr>
        </tfoot>
    </table>

th

  • 单元格的标题
  • 属性

    --colspan、rowspan、headers同td

    --scope 表示单元格在某一行列的标题

  • row
  • col
  • rowgroup
  • colgroup
  • auto

th-rowspan


    <table border="1">
        <thead>
            <tr>
                <th>区域</th>
                <th>寄达地</th>
                <th>首重(元/1000g)</th>
                <th>续重(元/1000g)</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th rowspan="2">一区</th>
                <td>浙江、上海、江苏</td>
                <td>6</td>
                <td>1</td>
            </tr>
            <tr>
                <td>江西、安徽</td>
                <td>7</td>
                <td>1</td>
            </tr>
            <tr>
                <th>二区</th>
                <td>北京、天津、河北</td>
                <td>9</td>
                <td>4</td>
            </tr>
            <tr>
                <th>三区</th>
                <td>辽宁、甘肃、四川</td>
                <td>10</td>
                <td>4</td>
            </tr>
            <tr>
                <th>四区</th>
                <td>吉林、黑龙江、云南</td>
                <td>10</td>
                <td>6</td>
            </tr>
            <tr>
                <th>五区</th>
                <td>新疆、西藏</td>
                <td>15</td>
                <td>10</td>
            </tr>
        </tbody>
    </table>

th-scope


完整代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>table</title>
</head>

<body>
    <table border="1">
        <thead>
            <tr>
                <th></th>
                <th>时间</th>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th rowspan="3" scope="rowgroup">上午</th>
                <!--跨了三行,th表示范围是3行-->
                <th scope="row">8:00-8:45</th>
                <td>语文</td>
                <td>数学</td>
                <td>语文</td>
                <td>英语</td>
                <td>数学</td>
            </tr>
            <tr>
                <th scope="row">9:00-9:45</th>
                <td>数学</td>
                <td>数学</td>
                <td>英语</td>
                <td>活动</td>
                <td>活动</td>
            </tr>
            <tr>
                <th scope="row">10:00-10:45</th>
                <td>活动</td>
                <td>数学</td>
                <td>活动</td>
                <td>语文</td>
                <td>活动</td>
            </tr>
            <tr>
                <th rowspan="2" scope="rowgroup">下午</th>
                <th scope="row">13:00-13:45</th>
                <td>英语</td>
                <td>数学</td>
                <td>语文</td>
                <td>数学</td>
                <td>语文</td>
            </tr>
            <tr>
                <th scope="row">14:00-14:45</th>
                <td>劳动</td>
                <td>数学</td>
                <td>语文</td>
                <td>活动</td>
                <td>英语</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。
1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。
1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值