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還不賴。

时间: 2024-10-10 05:04:43

HTML: 用表格畫出課程表的相关文章

台灣VR內容產業聯盟_技術推廣課程

歡迎報名參加... 課程目標: ● 第1天課程學完之後,您會充分理解VR(含AR.MR)技術的本質.原理和產業發展趨勢.包括掌握VR技術風潮下的完整產業生態.投資策略和文創出版的IP授權模式等新機會. ● 第2天課程學完之後,您會深刻領會VR身歷其境(定位其中)的沉浸感(帶入感)是來自於幕後的3D素材(Material),您先學會360全景拍攝的技巧和後製作流程,並實際演練.此外,您還會熟悉其他的VR素材製作途徑和工具. ● 第3天課程學完之後,您會完整認識當今全球最先進的HTC Vive產品的

VR&HTC課程

課程目標: 第1天課程學完之後,您會充分理解VR(含AR.MR)技術的本質.原理和產業發展趨勢.包括掌握VR技術風潮下的完整產業生態.投資策略和文創出版的IP授權模式等新機會. 第2天課程學完之後,您會深刻領會VR身歷其境(定位其中)的沉浸感(帶入感)是來自於幕後的3D素材(Material),您先學會360全景拍攝的技巧和後製作流程,並實際演練.此外,您還會熟悉其他的VR素材製作途徑和工具. 第3天課程學完之後,您會完整認識當今全球最先進的HTC Vive產品的結構.安裝和使用.然後深入學習使

Daydream & HTC VR課程

--給您扎實的VR(含AR)內容開發技 --發揮您的素材創作天賦,大幅提升內容品質 --應用於HTC Vive和 Android Daydream VR平台 課程簡介: 虛擬實境( VR)是當今產業大趨勢,無限商機等待我們去開發.近年VR相關技術與發展日漸受到各界重視,並且被逐漸應用在醫療.農業.觀光.娛樂與教育等領域,是未來行動載具不可或缺的發展項目.擴增實境(AR)的也替人類帶來多采多姿的樂趣,君不見Pokemon Go讓眾人為之瘋狂的情境. 台灣HTC Vive也成為當今世界上最卓越的VR

歡迎下載 高煥堂的22個視頻課程(免費)

高煥堂的22個視頻課程(免費) 目录:(视频格式:mp4) 课程(1):抽象的迷思_父类(Superclass)不是抽象出来的 课程(2):抽象的迷思_API不是从业务抽象出来的(1)_设计思维 课程(3):抽象的迷思_API不是从业务抽象出来的(2)_举例说明 请下载==>视频课程(Part_01):抽象的迷思 课程(4):从编程到设计_开发者的心灵鸡汤 课程(5):从编程到设计_A段架构师的职责 课程(6):从编程到设计_接口(Interface)与未来性设计 课程(7):从编程到设计_高老

简单4步教你用在线表格设计用户调研收集表

用在线表格设计用户调研收集表?在线表格还可以做这个?大家肯定有很多疑问,今天小编就来给你一一解答,只需要简单的4步,就可轻松设计一套用户调研收集表. 1:我们使用百度浏览器搜索"蜘蛛表格"官网,进入官网点击免费使用或者右上角注册 2:点击注册之后弹如入第二个页面,完成以下填写信息之后注册,会提示你注册成功,登录之后会进入后台. 3:然后新建应用-新建模板应用-用户调研模板-使用模板-修改相关参数及调研问题. 4:相关参数设置完成点击发布表单-创建生成链接,用户调研系统就做好了,可分享链

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

fsLayuiPlugin 是一个基于layui的快速开发插件,支持数据表格增删改查操作,提供通用的组件,通过配置html实现数据请求,减少前端js重复开发的工作. GitHub下载 码云下载 测试环境地址:http://fslayui.itcto.cn css和js引用 公共css和js必须全部引用 <!-- layui css --> <link rel="stylesheet" type="text/css" href="/plug

老男孩老師課程學習筆記----linux目錄特點

linux 目錄的特點 1./根是所有目錄的頂點 2.目錄結構像一顆倒掛的樹 3.目錄和磁盤分區默認是沒有關聯的 4./根下不同的目錄可能會對應不同的分區和磁盤 5.所有的目錄都是按照一定的類別有規律的組織和命名的 linux裡設備如果不掛載是看不到入口的,類似沒有窗戶沒門的監獄 如果希望設備被訪問,就必須給這個設備一個入口 這個入口就叫作掛載點,掛載點的表現實質是一個目錄 mount 光驅也是一種設備 ---> cdrom mount /dev/cdrom /mnt / 第一塊盤 系統程序 /

老男孩老師課程學習筆記----第一階段Linux命令行總結

~相信自己,勤奮努力,不斷總結!~ 1.mkdir make directorys 創建目錄   例子: mkdir /data 在根/下創建data目錄   -p 遞歸創建目錄 例子: [[email protected] /]# mkdir -p /oldboy/test/a/b/c/d   (-p 遞歸創建目錄) [[email protected] /]# tree /oldboy/(如果tree沒有,可以yum install tree -y) /oldboy/ └── test   

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

按照WEB2.0风格,设计了几个表格样式,希望大家喜欢. WEB2.0提倡使用div开布局,但不是要全然放弃使用表格,表格在数据展现方面还是不错的选择. 如今使用介绍使用CSS样式表来控制.美化表格的方法. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><