HTML:表格实现

作业内容

说明以下表格是如何实现的:

知识点:HTML 表格

表格标签

<table>     定义表格
<caption>   定义表格标题
<th>        定义表格的表头
<tr>        定义表格的行
<td>        定义表格单元
<thead>     定义表格的页眉
<tbody>     定义表格的主体
<tfoot>     定义表格的页脚
<col>       定义用于表格列的属性
<colgroup>  定义表格列的组

合并属性

colspan 列合并
rowspan 行合并

边框属性

border = 边框粗细

思路

如图实现思路:

  • 五行四列的一个含标题的表格
    有边框
    第一行的第一列和第四列与下一的对应列进行合并
    第一行的第二列与第二列进行列合并并且该列为表头
    最后一行的前三列进列合并并且该列为表头

实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title></head>
<body><table border="1">
    <caption>购物车</caption>
    <tr>
        <td rowspan="2">名称</td>
        <th colspan="2">2016-11-22</th>
        <td rowspan="2">小计</td>
    </tr>
    <tr>
        <td>重量</td>
        <td>单价</td>
    </tr>
    <tr>
        <td>苹果</td>
        <td>3公斤</td>
        <td>5元/公斤</td>
        <td>15元</td>
    </tr>
    <tr>
        <td>香蕉</td>
        <td>2公斤</td>
        <td>6元/公斤</td> 
        <td>12元</td>
    </tr>
    <tr>
        <th colspan="3">总价</th>
        <td>27元</td>
    </tr>
</table>
</body>
</html>

参考

w3school HTML 表格

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 今天来完成下面的表格 border设置表格边框 这个表格是有边框的,所以需要进行设置。代码如下: caption ...
    ittianbao阅读 3,318评论 4 4
  • 一.明确目标: 二.分解任务:第一步:明确表格的标题;第一步:明确表格的行数列数以及跨行跨列情况;第三步:明确表格...
    葶寳寳阅读 3,471评论 2 4
  • 一. 所要实现的表格 二 .实现过程 分析第一步 是一个5行4列的表格 表格样式 border 宽为1px ,文字...
    元气满满321阅读 3,244评论 0 4
  • 在上一篇文章中我们介绍了列表的实现,戳这里列表实现。在网页中,我们经常能看到各式各样的表格,所以我们就来学习一下表...
    TW张苗阅读 3,188评论 3 2
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,690评论 1 92

友情链接更多精彩内容