SS3 可以將文本內容設計成像報紙一樣的多列布局,如下實例:
我們學的不僅是技術,更是夢想!我的頭條里介紹了HTML、CSS、Javascript、Python,Java,Ruby,C,PHP , MySQL等各種編程語言的基礎知識。
瀏覽器支持
表格中的數字表示支持該方法的第一個瀏覽器的版本號。
緊跟在數字后面的 -webkit- 或 -moz- 為指定瀏覽器的前綴。
屬性 | |||||
---|---|---|---|---|---|
column-count | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit-11.1 |
column-gap | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit-11.1 |
column-rule | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit-11.1 |
column-rule-color | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit11.1 |
column-rule-style | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit11.1 |
column-rule-width | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit11.1 |
column-width | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit11.1 |
CSS3 多列屬性
我們將學習以下幾個 CSS3 的多列屬性:
column-count
column-gap
column-rule-style
column-rule-width
column-rule-color
column-rule
column-span
column-width
CSS3 創建多列
column-count
屬性指定了需要分割的列數。
以下實例將 <div> 元素中的文本分為 3 列:
實例
div {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
CSS3 多列中列與列間的間隙
column-gap
屬性指定了列與列間的間隙。
以下實例指定了列與列間的間隙為 40 像素:
實例
div {
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
}
CSS3 列邊框
column-rule-style
屬性指定了列與列間的邊框樣式:
實例
div {
-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
-moz-column-rule-style: solid; /* Firefox */
column-rule-style: solid;
}
嘗試一下 ?
column-rule-width
屬性指定了兩列的邊框厚度:
實例
div {
-webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
-moz-column-rule-width: 1px; /* Firefox */
column-rule-width: 1px;
}
column-rule-color
屬性指定了兩列的邊框顏色:
實例
div {
-webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
-moz-column-rule-color: lightblue; /* Firefox */
column-rule-color: lightblue;
}
嘗試一下 ?
column-rule
屬性是 column-rule-* 所有屬性的簡寫。
以下實例設置了列直接的邊框的厚度,樣式及顏色:
實例
div {
-webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
-moz-column-rule: 1px solid lightblue; /* Firefox */
column-rule: 1px solid lightblue;
}
嘗試一下 ?
指定元素跨越多少列
以下實例指定 <h2> 元素跨越所有列:
實例
h2 {
-webkit-column-span: all; /* Chrome, Safari, Opera */
column-span: all;
}
嘗試一下 ?
指定列的寬度
column-width
屬性指定了列的寬度。
實例
div {
-webkit-column-width: 100px; /* Chrome, Safari, Opera */
column-width: 100px;
}
嘗試一下 ?
CSS3 多列屬性
下表列出了所有 CSS3 的多列屬性:
屬性 | 描述 |
---|---|
column-count | 指定元素應該被分割的列數。 |
column-fill | 指定如何填充列 |
column-gap | 指定列與列之間的間隙 |
column-rule | 所有 column-rule-* 屬性的簡寫 |
column-rule-color | 指定兩列間邊框的顏色 |
column-rule-style | 指定兩列間邊框的樣式 |
column-rule-width | 指定兩列間邊框的厚度 |
column-span | 指定元素要跨越多少列 |
column-width | 指定列的寬度 |
columns | 設置 column-width 和 column-count 的簡寫 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
用于呈現邏輯上并列的具有相關性的數據內容.
<ul>
<li></li>
</ul>
disc: 實心圓點
circle: 空心圓圈
square: 實心正方形
<ol>
<li></li>
</ol>
1: 阿拉伯數字
i: 小寫羅馬數字
I: 大寫羅馬數字
A: 大寫字母
a: 小寫字母
適用呈現包含主題及描述的數據內容.
<dl>
<dt>主題</dt>
<dd>描述</dd>
</dl>
表格
<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
thead: 表頭
tbody: 表體
tfoot: 表腳
th: 專用于表頭中的單元格, 其具有自動加粗并且居中的效果.
表格的屬性控制:
border: 邊框
bordercolor: 邊框顏色
width: 寬度
height: 高度
cellspacing: 單元格間距(外)
cellpadding: 單元格填充(內)
align: 表格的位置控制
單元格的屬性控制:
align
valign
如何合并單元格/跨行或跨列?
<td rowspan="number" colspan="number">
注意: 合并后, 會引發單元格數量的減少!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>我的電腦文件列表</h1>
<ul>
<li>我的電腦
<ul>
<li>本地磁盤(C:)
<ul>
<li>我的文檔</li>
<li>我的收藏</li>
</ul>
</li>
<li>本地磁盤(D:)
<ul>
<li>我的游戲</li>
<li>我的資料</li>
<li>我的電影</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
TML 表格實例:
First Name | Last Name | Points |
---|---|---|
Jill | Smith | 50 |
Eve | Jackson | 94 |
John | Doe | 80 |
Adam | Johnson | 67 |
在線實例
表格
這個例子演示如何在 HTML 文檔中創建表格。
HTML 表格
表格由 <table> 標簽來定義。每個表格均有若干行(由 <tr> 標簽定義),每行被分割為若干單元格(由 <td> 標簽定義)。字母 td 指表格數據(table data),即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。
表格實例
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
在瀏覽器顯示如下::
row 1, cell 1 | row 1, cell 2 |
row 2, cell 1 | row 2, cell 2 |
HTML 表格和邊框屬性
如果不定義邊框屬性,表格將不顯示邊框。有時這很有用,但是大多數時候,我們希望顯示邊框。
使用邊框屬性來顯示一個帶有邊框的表格:
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
HTML 表格表頭
表格的表頭使用 <th> 標簽進行定義。
大多數瀏覽器會把表頭顯示為粗體居中的文本:
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
在瀏覽器顯示如下:
Header 1 | Header 2 |
---|---|
row 1, cell 1 | row 1, cell 2 |
row 2, cell 1 | row 2, cell 2 |
更多實例
沒有邊框的表格
本例演示一個沒有邊框的表格。
表格中的表頭(Heading)
本例演示如何顯示表格表頭。
帶有標題的表格
本例演示一個帶標題 (caption) 的表格
跨行或跨列的表格單元格
本例演示如何定義跨行或跨列的表格單元格。
表格內的標簽
本例演示如何顯示在不同的元素內顯示元素。
單元格邊距(Cell padding)
本例演示如何使用 Cell padding 來創建單元格內容與其邊框之間的空白。
單元格間距(Cell spacing)
本例演示如何使用 Cell spacing 增加單元格之間的距離。
HTML 表格標簽
標簽 | 描述 |
---|---|
<table> | 定義表格 |
<th> | 定義表格的表頭 |
<tr> | 定義表格的行 |
<td> | 定義表格單元 |
<caption> | 定義表格標題 |
<colgroup> | 定義表格列的組 |
<col> | 定義用于表格列的屬性 |
<thead> | 定義表格的頁眉 |
<tbody> | 定義表格的主體 |
<tfoot> | 定義表格的頁腳 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
*請認真填寫需求信息,我們會在24小時內與您取得聯系。