這個知識點,常常被我忽略,而且誤解(其實不是我誤解),曾經一個公司的要求:不使用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: 用表格畫出課程表的更多相关文章

  1. 用for; while...do; do...while; 写出九九乘法表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 第二天(就业班) html的引入、html常用标签、实体标签、超链接标签、图片标签、表格、框架标签、表单[申明:来源于网络]

    第二天(就业班) html的引入.html常用标签.实体标签.超链接标签.图片标签.表格.框架标签.表单[申明:来源于网络] 第二天(就业班) html的引入.html常用标签.实体标签.超链接标签. ...

  3. Jquery操作表格多出一个内容行

    目录 前言 需求 如何监听每一行点击,获取点击id 前后端 问题更新,ajax异步带来的问题 废弃使用HTML拼接 前言 我的前端实在是太差劲了,导致Jquery操作表格多出一个内容行,这个功能我都做 ...

  4. 使用VS2017进行Python代码的编写并打印出九九乘法表

    我们来盘一盘怎么使用VS2017进行python代码的编写并打印出九九乘法表. 使用Visual Studio 2017进行Python编程不需要太复杂的工作,只需要vs2017安装好对Python的 ...

  5. 编写Java程序,使用循环结构打印出九九乘法表

    编写Java程序,使用循环结构打印出九九乘法表 效果如下: 实现代码: public class Multiplication99 { public static void main(String[] ...

  6. fsLayuiPlugin数据表格弹出form表单说明

    fsLayuiPlugin 是一个基于layui的快速开发插件,支持数据表格增删改查操作,提供通用的组件,通过配置html实现数据请求,减少前端js重复开发的工作. GitHub下载 码云下载 测试环 ...

  7. 美丽的表格样式(使用CSS样式表控制表格样式)

    按照WEB2.0风格,设计了几个表格样式,希望大家喜欢. WEB2.0提倡使用div开布局,但不是要全然放弃使用表格,表格在数据展现方面还是不错的选择. 如今使用介绍使用CSS样式表来控制.美化表格的 ...

  8. SQL学习之Insert的特殊用法(插入检索出的数据,表之间的数据复制)

    1.插入检索出的数据 select * from dbo.Customers_1

  9. 漂亮的表格样式(使用CSS样式表控制表格样式)

    根据WEB2.0风格,设计了几个表格样式,我希望你喜欢. WEB2.0推广使用div开放式布局.但并不是完全放弃使用形式,在数据表现形式而言是一个不错的选择. 本节将介绍如何使用现在CSS样式表来控制 ...

随机推荐

  1. Perl中的正则表达式

    转自:http://c20031776.blog.163.com/blog/static/684716252013624383887/ Perl 程序中,正则表达式有三种存在形式 分别是 (1 模式匹 ...

  2. phpStorm支持CodeIgniter代码提示/自动完成

    下载这个文件phpstorm-ci-ac 或者去github下载解压里面的三个文件到ci根目录下然后找到这三个文件 system\core\Controller.phpsystem\core\Mode ...

  3. angular如何在一个网页中同时启动两个app?

    AngularJS深入 这个系列真不错,是我想学的深入内容. http://syaning.com/2015/07/16/dive-into-angular-1/ 一般情况下,一个页面中只有一个应用, ...

  4. Oracle多个服务各代表什么作用(转)

    在Windows 操作系统下安装Oracle 9i时会安装很多服务——并且其中一些配置为在Windows 启动时启动.在Oracle 运行在Windows 下时,它会消耗很多资源,并且有些服务可能我们 ...

  5. BZOJ 1192: [HNOI2006]鬼谷子的钱袋 数学结论

    1192: [HNOI2006]鬼谷子的钱袋 Description 鬼谷子非常聪明,正因为这样,他非常繁忙,经常有各诸侯车的特派员前来向他咨询时政.有一天,他在咸阳游历的时候,朋友告诉他在咸阳最大的 ...

  6. 《大话》之第三者家族 代理 Vs 中介者

    前两天,有个同学突然问我说:"我感觉代理模式和中介者模式不好区分,你能给我讲讲吗?" 刚开始还没敢张嘴,因为他突然一问,我貌似也不知道,经过整理,现在将结果贴出来,请大家共享 代理 ...

  7. Centos 6.4 32位 gcc 升级(已验证)

    具体需要升级成什么版本自行下载https://gcc.gnu.org/ 本文升级为4.8.5 1.下载编译所需依赖库 cd gcc-4.8.5 ./contrib/download_prerequis ...

  8. mysql数据库版本引发的问题

    改前: 改后:

  9. Linux重定向命令

    linux重定向命令应用及语法  [复制链接]   发表于 2008-12-18 18:24 | 来自  51CTO网页 [只看他] 楼主     1. 标准输入的控制语法:命令 文件将命令的执行结果 ...

  10. POJ2763 Housewife Wind(DFS序)

    题目:单边修改,树链查询. 这题是边权,不是点权,不过也可以看作是点权. 然后其实就和BZOJ2819一样. #include<cstdio> #include<cstring> ...