關於table排版_ZenDei技術網路在線

關於table排版

-Advertisement-

colspan和rowspan這兩個屬性用於創建特殊的表格。 colspan是“column span（跨列）”的縮寫。colspan屬性用在td標簽中，用來指定單元格橫向跨越的列數：在瀏覽器中將顯示如下：單元格1 單元格2 單元格3 單元格4 該例通過把colspan設為“3”, 令所在單元格 ...

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

 1 <html>
 2 <head>
 3 </head>
 4 <table border= "1 "   width= "200 " >
 5     <tr>
 6         <td colspan="4"  >ss
 7         </td>
 8     </tr>
 9     <tr>
10         <td   width= "25% "> 　 </td>
11         <td   width= "25% "> 　 </td>
12         <td   width= "25% "> 　 </td>
13         <td   width= "25% "> 　 </td>
14     </tr>
15     <tr>
16         <td   width= "25% "rowspan="2"> 　 </td>
17         <td   width= "25% "> 　 </td>
18         <td   width= "25% "> 　 </td>
19         <td   width= "25% "> 　 </td>
20     </tr>
21     <tr>
22         <td   width= "25% "> 　 </td>
23         <td   width= "25% " rowspan="3"> 　 </td>
24         <td   width= "25% "> 　 </td>
25     </tr>
26     <tr>
27         <td   width= "25% " colspan="2"  > 　 </td>
28         <td   width= "25% "> 　 </td>
29     </tr>
30     <tr>
31         <td   width= "25% "> 　 </td>
32         <td   width= "25% "> 　 </td>
33         <td   width= "25% "> 　 </td>
34     </tr>
35 </table>
36 </html>

table自定義樣式設置：border-collapse: collapse;

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

避免jQuery名字衝突--noConflict()方法

眾所周知，在jQuery語法中，$符號是jQuery的簡寫方式。但在某些情況下，可能需要在同一個頁面引入其他javascript庫（比如Prototype）。因為$簡短方便，很多的庫也是使用$符號。為了避免名稱衝突，jQuery提供了noConflict()方法來解決這個問題。調用該方法可以把對$標 ...
數據類型轉換中的一些特殊情況（JY06-JavaScript）

1.字元串的不可變性字元串定義了後，會一直占據記憶體空間，企鵝該處記憶體空間（棧）不可被重新賦值。 2.短路運算 ||、&& 二元運算符，返回參與運算的操作數的原值（原數據類型和原數據），運算結束後，返回導致運算結束的那個操作數。 3.三元運算符 code1？code2：code3; 與if-els ...
React JS 基礎知識17條

1. 基礎實例說明： (1).react.js：React 的核心庫。 (2).react-dom.js：提供與 DOM 相關的功能。 (3).Browser.js：將 JSX 語法轉為 JavaScript 語法。這一步很消耗時間，實際上線的時候，應該將它放到伺服器完成，操作如下： $ babe ...
字體屬性設置之一：谷歌瀏覽器12px以下字體的顯示；方法和原理

前言： chrome 谷歌瀏覽器預設的字體大小為16px；可以通過設置font-size來設置字體大小但是當設置到12px以下的時候字體大小不再改變；對於想設置其他大小的字體就很頭疼，本文參考網上的方法，並對該方法以及原理介紹；並對該方法的弊端進行闡述並提出一種合適的解決辦法 1.適用對象： blo ...
引用css樣式的書寫格式

css的書寫格式一共有三種行內樣式:意思是在行內中寫樣式例如說<p style="color:red">用行內樣式編寫我的顏色</p> 只適用於<body>（字體顏色和背景顏色）和<body>裡面的標簽，但不適用於<body>之外的例如:head，title，之類的標簽內嵌樣式:使用style ...
H5動效的常見製作手法

眾所周知，一個元素，動往往比靜更吸引眼球；一套操作界面，合適的動態交互反饋能給用戶帶來更好的操作體驗；一個H5運營宣傳頁，炫酷的動畫特效定能助力傳播和品牌打造。近兩年，小到loading動畫，表單動效，大到各式各樣H5運營頁的炫酷展現，“動效設計”一詞可謂是火遍大江南北，而動效設計早已成為一名 ...
CSS字體代碼

宋體 SimSun 黑體 SimHei 微軟雅黑 Microsoft YaHei 微軟正黑體 Microsoft JhengHei 新宋體 NSimSun 新細明體 PMingLiU 細明體 MingLiU 標楷體 DFKai-SB 仿宋 FangSong 楷體 KaiTi 仿宋_GB2312 Fa ...
JS中常見問題

js 中的奇葩問題 1、eg：000101 = 65; 000101為獲取到的字元串類型，通過click事件傳遞，000101變為了65; 解決方法：jq中直接運行的代碼中獲取到的000101為字元串類型，但是後邊人為運行此代碼相關的代碼時獲取到的000101就為number類型。由此可見在JS中數 ...