table合并單元格_制作課程表3——合并單元格

由于瀏覽器兼容問題,、 以及 很少被使用,

所以我們將課程表依然使用tr、td元素,結合樣式實現出前面案例中效果

原來代碼:

課程1 課程2 課程3 課程4 課程5 課程1 課程2 課程3 課程4 課程5 課程1 課程2 課程3 課程4 課程5 課程1 課程2 課程3 課程4 課程5 課程1 課程2 課程3 課程4 課程5

原來表格效果:

dff05c36715d56315851a2fe935e0d2d.png

為了實現課程表2效果,需要在前面增加一個“課程表”標題,和增加一行星期內容

課程表 星期一 星期二 星期三 星期四 星期五 課程1 課程2 課程3 課程4 課程5 ……

因為課程表前面還需要增加一列,顯示上午、下午和晚上

所以在每個tr后面再增加一個單元格td

<table>        <caption>課程表caption>        <tr>            <td>td>            <td>星期一td>            <td>星期二td>            <td>星期三td>            <td>星期四td>            <td>星期五td>        tr>        <tr>            <td>上午td>            <td>課程1td>            <td>課程2td>            <td>課程3td>            <td>課程4td>            <td>課程5td>        tr>        <tr>            <td>td>            <td>課程1td>            <td>課程2td>            <td>課程3td>            <td>課程4td>            <td>課程5td>        tr>        <tr>             <td>下午td>            <td>課程1td>            <td>課程2td>            <td>課程3td>            <td>課程4td>            <td>課程5td>        tr>        <tr>            <td>td>            <td>課程1td>            <td>課程2td>            <td>課程3td>            <td>課程4td>            <td>課程5td>        tr>        <tr>            <td>晚上td>            <td>課程1td>            <td>課程2td>            <td>課程3td>            <td>課程4td>            <td>課程5td>        tr>    table>

頁面效果圖如下:

b4b19d65265095ad464434eccbe2b463.png

此時需要合并單元格,

“上午”和下面的單元格合并,需設置rowspan=""屬性和值,這表示該單元格(向下)跨越幾行的意思,此處跨越兩行,所以rowspan="2",同時,被下面合并的單元格td元素要去掉,如下面代碼:

(如果該單元格向右跨列合并,則用colspan="")

<table>        <caption>課程表caption>        <tr>            <td>td>            <td>星期一td>            <td>星期二td>            <td>星期三td>            <td>星期四td>            <td>星期五td>        tr>        <tr>            <td rowspan="2">上午td>            <td>課程1td>            <td>課程2td>            <td>課程3td>            <td>課程4td>            <td>課程5td>        tr>        <tr>            <td>課程1td>            <td>課程2td>            <td>課程3td>            <td>課程4td>            <td>課程5td>        tr>        <tr>             <td rowspan="2">下午td>            <td>課程1td>            <td>課程2td>            <td>課程3td>            <td>課程4td>            <td>課程5td>        tr>        <tr>            <td>課程1td>            <td>課程2td>            <td>課程3td>            <td>課程4td>            <td>課程5td>        tr>        <tr>            <td>晚上td>            <td>課程1td>            <td>課程2td>            <td>課程3td>            <td>課程4td>            <td>課程5td>        tr>    table>

頁面效果如下圖所示:

0b8af5248599560c95542ce969706df5.png

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/271068.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/271068.shtml
英文地址,請注明出處:http://en.pswp.cn/news/271068.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

php join a.id b.id,mysql求助 請問where a.id=b.id 和join on a.id=b.id 在效率上的區別

下面是ecshop 的商品表和品牌表的查詢&#xff0c;請問它們的查詢效率有什么區別呢&#xff1f;還有一個問題是 left join 和join的效率哪個高一點呢。謝謝 &#xff01;&#xff01;SELECT a.goods_id , a.goods_name , b.brand_nameFROM ecs_goods AS aLEFT JOIN ecs_brand A…

數據庫設計:數據庫應用系統的生命周期

數據庫應用系統的生命周期可以劃分為&#xff1a;數據庫規劃、需求描述與分析、數據庫與應用程序設計、數據庫設計實現、數據庫測試、數據庫運維。1、數據庫規劃 數據庫規劃是創建數據庫應用系統的第一步&#xff0c;也是數據庫應用系統的任務描述和目標的明確。數據庫規劃的內…

從零開始,做一個NodeJS博客(四):服務器渲染頁面與Pjax

標簽&#xff1a; NodeJS 0 一個星期沒更新了 一直在忙著重構代碼&#xff0c;以及解決重構后出現的各種bug 現在CSS也有一點了&#xff0c;是時候把遇到的各種坑盤點一下了 1 聽歌排行 API 修復與重構 1.1 修復 在加載云音樂聽歌排行的時候&#xff0c;有時會出現一個奇怪的…

java 簡單事件的使用,如何正確的使用Java事件通知(1)

如何正確的使用Java事件通知(1)通過實現觀察者模式來提供 Java 事件通知(Java event notification)似乎不是件什么難事兒&#xff0c;但這過程中也很容易就掉進一些陷阱。本文介紹了我自己在各種情形下&#xff0c;不小心制造的一些常見錯誤。Java 事件通知讓我們從一個最簡單的…

Java 自動裝箱與拆箱

Java 自動裝箱與拆箱 裝箱就是自動將基本數據類型轉換為包裝器類型&#xff08;int–>Integer&#xff09;&#xff1b;調用方法&#xff1a;Integer 的 valueOf(int) 方法 拆箱就是自動將包裝器類型轉換為基本數據類型&#xff08;Integer–>int&#xff09;。調用方法…

基本系統設備感嘆號_win7系統網絡圖標顯示感嘆號的問題

有系統之家的小伙伴&#xff0c;在使用win764位純凈版系統上網的時候&#xff0c;出現網絡圖標顯示感嘆號的問題。這種問題我們可以通過在網絡檢測修復中進行自行檢測。或者是檢查一下是不是硬件設備的問題。詳細解決步驟就來看下系統哥小編是怎么做的吧~win7 64系統無法上網顯…

LVM邏輯卷,RAID磁盤陣列

磁盤管理&#xff1a; 有關硬盤的識別&#xff0c;linux根據設備類型對存儲設備進行識別&#xff0c;如果是IDE設備&#xff0c; 在計算機中會被識別為hd&#xff0c;第一個IDE設備會被識別為hda&#xff0c;第二個IDE設備會被識別為hdb&#xff0c;依次類推。如果是SATA,USB,S…

硬件編程:STM32串口發送數據和接收數據方式總結!

串口發送數據1、串口發送數據最直接的方式就是標準調用庫函數 。void USART_SendData(USART_TypeDef* USARTx, uint16_t Data);第一個參數是發送的串口號&#xff0c;第二個參數是要發送的數據&#xff0c;但是用過的朋友應該覺得不好用&#xff0c;一次只能發送單個字符&#…

Java編程題修院子,了解java虛擬機—JVM相關參數設置(2)

1. JVM相關參數設置JVM相關配置-XX:PrintGC兩次次YoungGC&#xff0c;兩次FullGC。-XX:PrintGCDetails打印GC時的內存&#xff0c;并且在程序結束時打印堆內存使用情況-XX:PrintHeapAtGC每次GC時會分別打印回收前與回收后堆信息-XX:PrintGCTimeStamps選擇打印GC的方式后&…

此異常最初是在此調用堆棧中引發的:_【8】進大廠必須掌握的面試題Java面試異常和線程...

點擊上方“全棧程序員社區”&#xff0c;星標公眾號重磅干貨&#xff0c;第一時間送達Q1。錯誤和異常有什么區別&#xff1f;錯誤是在運行時發生的不可恢復的情況。如OutOfMemory錯誤。這些JVM錯誤無法在運行時修復。盡管可以在catch塊中捕獲錯誤&#xff0c;但是應用程序的執行…

高仿帶感魔性病毒源碼+成品(最近很火的)

高仿帶感魔性病毒源碼成品&#xff08;最近很火的&#xff09;娛樂使用。沒破壞性 會改壁紙和打亂桌面圖標順序 自己改回來就好 演示地址&#xff1a; 下載地址&#xff1a;鏈接: http://pan.baidu.com/s/1dF2ZlU5 密碼: m95p轉載于:https://www.cnblogs.com/blogwy/p/5804711.…

數據庫設計:數據庫設計的基本步驟介紹

數據庫設計主要包括用戶需求分析、概念結構設計、邏輯結構設計、物理結構設計、數據庫實施階段、數據庫運行和維護階段等六個階段。1、用戶需求分析 數據庫設計人員采用相應的輔助工具對應用對象的功能、性能、限制等要求進行科學實際的分析。2、概念結構設計 概念結構設計主要…

Hashcode 的作用

java 的集合有兩類&#xff0c;一類是 List&#xff0c;還有一類是 Set。前者有序可重復&#xff0c;后者無序不重復。當我們在 set 中插入的時候怎么判斷是否已經存在該元素呢&#xff0c;可以通過 equals 方法。但是如果元素太多&#xff0c;用這樣的方法就會比較滿。 于是有…

坎蒂雷賦權法 matlab,干貨 | 利用MATLAB實現FMCW雷達中的常用角度估計方法

其中在介紹角度估計中&#xff0c;通過對接收差頻信號在快慢時間維度的擴展&#xff0c;增加了空域的信息。擴展后的接收差頻信號可以表示為其中k表示接收天線的個數&#xff0c;d為天線間距。在“干貨|利用MATLAB實現FMCW雷達的角度估計”中&#xff0c;已經介紹了如何理解目標…

vscode 使用筆記

https://code.visualstudio.com/docs/setup/setup-overview#_proxy-server-support 如果使用代理上網時&#xff0c;需要配置&#xff1a; 在 settings.json 中這樣設定&#xff1a; // 將設置放入此文件中以覆蓋默認設置{"http.proxy": "http://用戶名:密碼IP:…

數據庫設計基礎:需求分析相關知識筆記

系統需求分析是用戶和相關設計人員對數據庫應用系統所涉及的內容和功能描述&#xff0c;主要是以用戶角度來了解系統&#xff0c;是數據庫邏輯設計和物理設計以及應用程序的涉及都根據系統分析的內容作為基礎。該階段是非常重要的環節&#xff0c;如果該階段設計的不好&#xf…

matlab 康托爾集,康托爾集的性質特點

康托爾集的性質特點康托三分集中有無窮多個點&#xff0c;所有的點處于非均勻分布狀態。此點集具有自相似性&#xff0c;其局部與整體是相似的&#xff0c;所以是一個分形系統。康托三分集具有(1)自相似性&#xff1b;(2)精細結構&#xff1b;(3)無窮操作或迭代過程&#xff1b…

String、StringBuuffer、StringBuilder三者的區別

可變性 String 類中使用 ?nal 關鍵字字符數組保存字符串&#xff0c; private final char value[] &#xff0c;所以 String 對象是不可變的。 StringBuilder 與 StringBu?er 都繼承自 AbstractStringBuilder 類&#xff0c;在 AbstractStringBuilder 中也是使用字符數組保存…

運算符和類型轉換

1.類型轉換&#xff1a; 分為自動轉換和強制轉換&#xff0c;一般用強制轉換。 其他類型轉換為整數&#xff1a;parseInt&#xff08;&#xff09;&#xff1b; 其他類型轉換為小數&#xff1a;parseFloat&#xff08;&#xff09;&#xff1b; 判斷是否是一個合法的數字類型&a…

數據庫設計基礎:數據字典相關知識筆記

1、數據字典的定義 數據字典&#xff08;Data Dictionary ,DD&#xff09;是各類數據描述的集合&#xff0c;它是關于數據庫中數據的描述&#xff0c;即元數據&#xff0c;而不是數據本身。2、數據字典的組成數據字典主要包括數據項、數據結構、數據流、數據存儲、處理過程等內…