表格怎么实现的咧~

我们的任务是这样哒:
表格实现
下笔之前
  • 分析表格,有标题,内容两部分,内容中包括跨行跨列的表格
  • 搜一下教程,菜鸟教程里面很详细,例子也很明了
  • 复习有关表格的标签用法
  • 看了几个关于跨行跨列的例子代码,明白其中写法
  • 在自己电脑上试一下怎么实现跨行跨列
  • 开始实现完整的表格
写好的代码

<pre>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PracticeForm</title>
</head>
<body>
<table border="1">
<caption>购物车</caption>
<tr>
<th rowspan="2">名称</th>
<th colspan="2">2016-11-22</th>
<th rowspan="2">小计</th>
</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>
</pre>

学到的
  • border 用来设置表格的边界
  • <caption></caption>用来设置表格标题
  • 跨行跨列问题
    <tr> <th rowspan="2">跨两列</th> <th colspan="2">跨两行</th> </tr>
  • 写表格的时候一行一行按顺序写,对于跨列问题,与它对齐的第一行为起始位置,之后合并单元格
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 177,085评论 25 709
  • 尽管阔别十余载,但少年时代建立起来的兄弟情谊依然根深蒂固,雷鹏和刘草儿紧紧拥抱在一起,良久方才分开。 刘草儿在来的...
    a33795b49045阅读 3,060评论 0 2
  • 假如我是一束月光, 轻轻地,推开那扇门扉, 悄悄地,走进我儿时的梦乡。 假如我是一束月光, 慢慢地,推开那扇窗棂,...
    叶之秋的心田阅读 3,173评论 0 3
  • (一) 池塘里的小丑鱼 幻想有一天在海里的生活 (二) 从前,我是你世界的奴仆 现在,我是我世界的君王 (三) 每...
    宸樂軒阅读 1,625评论 0 0
  • 1、我的100天的目标是什么?本周每一项的完成情况如何? 100天目标: a. 每天走10000步,b.新概念英语...
    1caae4d4f456阅读 1,427评论 0 0

友情链接更多精彩内容