HTML 表格中的行合并與列合并

colspan是橫向合并;rowspan是縱向合并。

colspan是“column span(跨列)”的縮寫。colspan屬性用在td標簽中,用來指定單元格橫向跨越的列數:

單元格1
單元格2 單元格3 單元格4

該例通過把colspan設為“3”, 令所在單元格橫跨了三列。如果我們將colspan設為“2”,則該單元格將只跨越兩列,于是有必要在第一行插入另外一個單元格,以確保兩行占據相同的列數。



該例在瀏覽器中將顯示如下:
單元格1 單元格2
單元格3 單元格4 單元格5

rowspan的作用是指定單元格縱向跨越的行數。


瀏覽器中將顯示如下:
單元格1 單元格2
單元格3
單元格4

上例中的單元格1,其rowspan被設為“3”,這表示該單元格必須跨越三行(本身一行,加上另外兩行)。因此,單元格1和單元格2在同一行,而單元格3和單元格4形成獨立的兩行。
?
?
綜合實例
ss
? ? ? ?
? ? ? ?
? ? ?
? ?
? ?

<html>
<head>
</head>
<table border= "1 " ? width= "200 " >
? ? ?<tr>
? ? ? ? <td colspan="4" ?>ss
? ? ? ? </td>
? ? ?</tr>
? ? ?<tr>
? ? ? ? <td ? width= "25% ">   </td> ?
? ? ? ? <td ? width= "25% ">   </td> ?
? ? ? ? <td ? width= "25% ">   </td> ?
? ? ? ? <td ? width= "25% ">   </td>?
? ? ?</tr>
? ? ?<tr>
? ? ? ? <td ? width= "25% "rowspan="2">   </td> ?
? ? ? ? <td ? width= "25% ">   </td> ?
? ? ? ? <td ? width= "25% ">   </td> ?
? ? ? ? <td ? width= "25% ">   </td>?
? ? ?</tr>
? ? ?<tr>
? ? ? ? <td ? width= "25% ">   </td> ?
? ? ? ? <td ? width= "25% " rowspan="3">   </td> ?
? ? ? ? <td ? width= "25% ">   </td>?
? ? ?</tr>
? ? ?<tr>
? ? ? ? <td ? width= "25% " colspan="2" ?>   </td> ?
? ? ? ? <td ? width= "25% ">   </td> ?


? ? ?</tr>
? ? ?<tr>
? ? ? ? <td ? width= "25% ">   </td> ?
? ? ? ? <td ? width= "25% ">   </td> ?
? ? ? ? <td ? width= "25% ">   </td> ?
? ? ?</tr>
</table>
</html>

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

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

相關文章

java快速排序

package com.atguigu.java;/*** 快速排序* 通過一趟排序將待排序記錄分割成獨立的兩部分&#xff0c;其中一部分記錄的關鍵字均比另一部分關鍵字小&#xff0c;* 則分別對這兩部分繼續進行排序&#xff0c;直到整個序列有序。*/ public class QuickSort {private static void s…

網址備份

1.jstl標簽庫http://archive.apache.org/dist/jakarta/taglibs/standard/binaries/2.tomcat服務器http://tomcat.apache.org/3.mysql架包https://mvnrepository.com/4.jqueryhttps://github.com/jquery/jquery/releases5.圖標http://icons8.com/preloaders6.jquery-formhttp://…

前端開發-熱更新原理解讀

- 一、websocket簡介- 二、熱跟新原理- 三、實例剖析- 四、總結websocket簡介 在h5推出之前&#xff0c;瀏覽器應用跟服務器端通信的機制只有http協議&#xff0c;http是一種無狀態的網絡協議&#xff0c;前端向服務器發起一個請求&#xff0c;服務器給出一次應答&#xff…

java楊輝三角

package com.atguigu.exer; /** 使用二維數組打印一個 10 行楊輝三角。【提示】1. 第一行有 1 個元素, 第 n 行有 n 個元素2. 每一行的第一個元素和最后一個元素都是 13. 從第三行開始, 對于非第一個元素和最后一個元素的元素。即&#xff1a; yanghui[i][j] yanghui[i-1][j-1…

這65條工作和成長建議,你將受用終生!

這65條工作和成長建議&#xff0c;每一條都值得我們認真思考。希望對你有啟發。 從1990年進入格力&#xff0c;董明珠已經工作了近30年。 她花了近30年的時間&#xff0c;一手把格力從一家虧損的中小企業變成全球500強&#xff0c;年銷售額超過1400億。 2004年&#xff0c;她被…

HTML5事件—visibilitychange 頁面可見性改變事件

又看到一個很有意思的HTML5事件 visibilitychange事件是瀏覽器新添加的一個事件&#xff0c;當瀏覽器的某個標簽頁切換到后臺&#xff0c;或從后臺切換到前臺時就會觸發該消息&#xff0c;現在主流的瀏覽器都支持該消息了&#xff0c;例如Chrome, Firefox, IE10等。雖然這只是一…

java回型數

import java.util.Arrays;public class hello {public static void main(String[] args) {//輸出5*5的int n 5;int [][] huizixingnew int[n][n];int minX0;//x軸最小下標int minY0;//y軸最小下標int maxXn-1;//x軸最大下標int maxYn-1;//y軸最大下標int counter0;//計數int xf…

用CSS3 vh 簡單實現DIV全屏居中

vh、vw、vmin、vmax介紹 vw&#xff1a;視窗寬度的百分比&#xff08;1vw 代表視窗的寬度為 1%&#xff09;vh&#xff1a;視窗高度的百分比vmin&#xff1a;當前 vw 和 vh 中較小的一個值vmax&#xff1a;當前 vw 和 vh 中較大的一個值 瀏覽器兼容性 &#xff08;1&#xff09…

解決360等等瀏覽器兼容模式解析不兼容代碼

之前寫的代碼不是很規范 , 在今天測試下發現360瀏覽器等等的瀏覽器使用兼容模式會有很多不兼容 , 網上了解過一下 , 說是很多瀏覽器的兼容模式可能就是為了兼容IE7之前的網站代碼 , 而非我們字面理解的兼容二字 ... OK!跑題了 ... 我的解決方案是在頁面head加<meta http…

java自定義異常報錯

public class TeamException extends Exception{static final long serialVersionUID -3387516993124229948L;public TeamException() {super();}public TeamException(String message) {super(message);} }

P多行溢出省略號的處理

因為-webkit-line-clamp: 2不兼容火狐或IE&#xff0c;采用判斷瀏覽器的方式來啟用哪個方式先判斷是什么瀏覽器 //判斷是否是谷歌瀏覽器 if (!stripos($_SERVER["HTTP_USER_AGENT"], chrome)) {$this->registerCssFile(web/css/view.css); } 行內樣式&#xff08;…

縮小窗口時CSS背景圖出現右側空白BUG的解決方法

頁面容器&#xff08;#wrap&#xff09;與頁面頭部&#xff08;#header &#xff09;為100%寬度。而內容的容器&#xff08;#page&#xff09;為固定寬度960px。瀏覽窗口縮小而小于內容層寬度時會產生寬度理解上的差異。如下圖所示窗口寬度大于內容層寬度&#xff1a; 改變瀏覽…

JAVA鏈接Mysql數據庫(一)

第一步自定義 properties 文件 userroot password12345 urljdbc:mysql://localhost:3306/test?useUnicodetrue&characterEncodingutf8 driverClasscom.mysql.jdbc.Driver第二部 創建 java 文件運行 import java.io.InputStream; import java.sql.Connection; import java…

優化器,SGD+Momentum;Adagrad;RMSProp;Adam

Optimization 隨機梯度下降&#xff08;SGD&#xff09;&#xff1a; 當損失函數在一個方向很敏感在另一個方向不敏感時&#xff0c;會產生上面的問題&#xff0c;紅色的點以“Z”字形梯度下降&#xff0c;而不是以最短距離下降&#xff1b;這種情況在高維空間更加普遍。 SGD的…

iOS開發-平臺使用TestFlight進行Beta測試

使用 TestFlight&#xff0c;你可以向測試人員發布你 App 的 prerelease 版本來收集反饋信息&#xff0c;為將來發布 App 的正式版做準備。現在 TestFlight 是一個可選功能&#xff0c;你也可以不使用它&#xff0c;而是像以往發布 App 那樣直接提交到 appStore。 TestFlight 使…

QPixmap QImage 相互轉化

QPainter p(this); QPixmap pixmap; pixmap.load("E:\\參考文件\\image\\1.jpg"); //QPixmap->QImage QImage tempImage pixmap.toImage(); p.drawImage(0,0,tempImage); QImage image; image.load("E:\\參考文件\\image\\1.jpg"); //QImage->QPixm…

java語言介紹 —(1)

1.基礎常識 軟件&#xff1a;即一系列按照特定順序組織的計算機數據和指令的集合。分為&#xff1a;系統軟件 和 應用軟件 系統軟件&#xff1a;windows , mac os , linux ,unix,android,ios,… 應用軟件&#xff1a;word ,ppt,畫圖板,… 人機交互方式&#xff1a; 圖形化界面…

微信小程序入門資源整理(熱更新)

從零開始&#xff1a;微信小程序新手入門寶典《一》 傳送門地址&#xff1a; https://segmentfault.com/a/1190000008035180 微信小程序部分資源整理 傳送門地址&#xff1a;http://blog.csdn.net/u012995964/article/details/53116477

第一個java程序helloworld —(2)

1.開發體驗——HelloWorld 1.1 編寫 創建一個java源文件&#xff1a;HelloWorld.java class HelloChina{public static void main(String[] args){System.out.println("Hello,World!");} }1.2 編譯&#xff1a; javac HelloWorld.java 1.3 運行&#xff1a; java Hel…

高并發大流量專題---6、獨立圖片服務器的部署

高并發大流量專題---6、獨立圖片服務器的部署 一、總結 一句話總結&#xff1a; 獨立圖片服務器還是非常有必要的&#xff0c;可以很大程度的降低主服務器的io以及提升用戶訪問速度 1、獨立圖片服務器 獨立的必要性&#xff1f; 分擔Web服務器的I/O負載&#xff1a;將耗費資源的…