HTML: 用表格畫出課程表
這個知識點,常常被我忽略,而且誤解(其實不是我誤解),曾經一個公司的要求:不使用table,一律用div,即使是整齊的,能夠使用table輕鬆佈局出的樣式,也一定要用div。
可能這傢伙沒搞清楚,table佈局和table之間的區別。
相反如下圖所示的內容,如果使用table遠遠比用div耗時少,如果一味摒棄table,不僅說明知識沒有活學活用,反而禁錮在自己的思維定勢當中,如果說div的優勢是網站佈局,那麼table的優勢就是數據的展示(和垂直方向的居中)。
<style>
table{
border-collapse: collapse;
}
table td{
height:24px;line-height: 24px;
width:100px;
border:1px solid #d7d7d7;
}
</style> <table>
<tr>
<td>時間星期</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<!-- 第一行 -->
<tr>
<td rowspan="2">上午</td>
<td>xx</td>
<td>cc</td>
<td>ff</td>
<td>dd</td>
<td>gg</td>
</tr>
<!-- 第二行中rowspan向下合併1個單元格-->
<tr>
<td>ddgf</td>
<td>hh</td>
<td>bb</td>
<td>ss</td>
<td>tt</td>
</tr>
<!--第三行中的第一個單元格被合併-->
<tr>
<td colspan="6"></td>
</tr>
<!-- 第四行colspan向右合併單元格5個 -->
<tr>
<td rowspan="2">下午</td>
<td>xx</td>
<td>cc</td>
<td>ff</td>
<td>dd</td>
<td>gg</td>
</tr>
<!-- 第五行同第二行 -->
<tr>
<td>ddgf</td>
<td>hh</td>
<td>bb</td>
<td>ss</td>
<td>tt</td>
</tr>
<!-- 第六行同第三行 -->
</table>
table還不賴。
HTML: 用表格畫出課程表的更多相关文章
- 用for; while...do; do...while; 写出九九乘法表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 第二天(就业班) html的引入、html常用标签、实体标签、超链接标签、图片标签、表格、框架标签、表单[申明:来源于网络]
第二天(就业班) html的引入.html常用标签.实体标签.超链接标签.图片标签.表格.框架标签.表单[申明:来源于网络] 第二天(就业班) html的引入.html常用标签.实体标签.超链接标签. ...
- Jquery操作表格多出一个内容行
目录 前言 需求 如何监听每一行点击,获取点击id 前后端 问题更新,ajax异步带来的问题 废弃使用HTML拼接 前言 我的前端实在是太差劲了,导致Jquery操作表格多出一个内容行,这个功能我都做 ...
- 使用VS2017进行Python代码的编写并打印出九九乘法表
我们来盘一盘怎么使用VS2017进行python代码的编写并打印出九九乘法表. 使用Visual Studio 2017进行Python编程不需要太复杂的工作,只需要vs2017安装好对Python的 ...
- 编写Java程序,使用循环结构打印出九九乘法表
编写Java程序,使用循环结构打印出九九乘法表 效果如下: 实现代码: public class Multiplication99 { public static void main(String[] ...
- fsLayuiPlugin数据表格弹出form表单说明
fsLayuiPlugin 是一个基于layui的快速开发插件,支持数据表格增删改查操作,提供通用的组件,通过配置html实现数据请求,减少前端js重复开发的工作. GitHub下载 码云下载 测试环 ...
- 美丽的表格样式(使用CSS样式表控制表格样式)
按照WEB2.0风格,设计了几个表格样式,希望大家喜欢. WEB2.0提倡使用div开布局,但不是要全然放弃使用表格,表格在数据展现方面还是不错的选择. 如今使用介绍使用CSS样式表来控制.美化表格的 ...
- SQL学习之Insert的特殊用法(插入检索出的数据,表之间的数据复制)
1.插入检索出的数据 select * from dbo.Customers_1
- 漂亮的表格样式(使用CSS样式表控制表格样式)
根据WEB2.0风格,设计了几个表格样式,我希望你喜欢. WEB2.0推广使用div开放式布局.但并不是完全放弃使用形式,在数据表现形式而言是一个不错的选择. 本节将介绍如何使用现在CSS样式表来控制 ...
随机推荐
- 微信支付v3发布到iis时的证书问题(转)
本文纯粹转载(原地址:微信支付v3发布到iis时的证书问题 ) 一开始报“出现了内部错误” 解决方法是 方法一 var cer = new X509Certificate(certpath, pass ...
- WOSA协议(转)
WOSA(全称是Windows开放式系统体系结构 Windows Open System Architecture),是微软公司提出的一种在Windows操作系统下的软件架构 WOSA/XFS是基于W ...
- C++的那些事:数据与类型
一.前言 最近在看C++Primer第5版,先前已经看过第4版,但是发现第5版在整个知识布局与个别知识的讲解上跟第4版差别还是挺大的,尤其是新增了C++11的内容,正如孟岩老师在第5版前言中所讲:“现 ...
- kali实用链接
1.Kali-linux安装之后的简单设置 :http://xiao106347.blog.163.com/blog/static/215992078201342410347137/ 2.kali文 ...
- [转]说说C语言运算符的“优先级”与“结合性”
补充自己的一点理解: 1.关于++i 与 i++的区别. ++i 和 i++如果是单独使用的语句,即二者后面均加上分号,或者其他单独使用的语句,没有任何区别.例如: for(i=0;i<100; ...
- sql 截取字符串与 截取字符串最长的字符串
); set @str='aa,32,22,55,7'; ) as '第一个逗号的索引值' )),),),'') as '第一个值' ),len(@str)) as '从第一逗号开始截取出后面的字符串 ...
- PDA移动开单系统-PDA开单,手机开单,开单APP,移动开单,移动POS开单
仓库的送货员.收货员.仓管员人手一部PDA,门店可以直接PDA扫描商品下订单或输入编号.拼音码等下订单,订单会直接录入到仓库管理软件中. 仓管在系统中可以一目了然的查询商品库存和订单需求数量.根据库存 ...
- LIS HDOJ 1257 最少拦截系统
题目传送门 题意:中文题面 分析:LIS模板题:n - 最长下降子序列 -> 最长上升子序列 贪心做法以后再补:) 代码: #include <cstdio> #include &l ...
- POJ1947 Rebuilding Roads(树形DP)
题目大概是给一棵树,问最少删几条边可以出现一个包含点数为p的连通块. 任何一个连通块都是某棵根属于连通块的子树的上面一部分,所以容易想到用树形DP解决: dp[u][k]表示以u为根的子树中,包含根的 ...
- 正则表达式学习日记zz
1."."为通配符,表示任何一个字符,例如:"a.c"可以匹配"anc"."abc"."acc": ...