整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
TML 表格實(shí)例:
| First Name | Last Name | Points |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| John | Doe | 80 |
| Adam | Johnson | 67 |
在線實(shí)例
表格
這個(gè)例子演示如何在 HTML 文檔中創(chuàng)建表格。
HTML 表格
表格由 <table> 標(biāo)簽來定義。每個(gè)表格均有若干行（由 <tr> 標(biāo)簽定義），每行被分割為若干單元格（由 <td> 標(biāo)簽定義）。字母 td 指表格數(shù)據(jù)（table data），即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。
表格實(shí)例
<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 表格和邊框?qū)傩?/p>
如果不定義邊框?qū)傩?，表格將不顯示邊框。有時(shí)這很有用，但是大多數(shù)時(shí)候，我們希望顯示邊框。
使用邊框?qū)傩詠盹@示一個(gè)帶有邊框的表格：
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
HTML 表格表頭
表格的表頭使用 <th> 標(biāo)簽進(jìn)行定義。
大多數(shù)瀏覽器會(huì)把表頭顯示為粗體居中的文本：
<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 |
更多實(shí)例
沒有邊框的表格
本例演示一個(gè)沒有邊框的表格。
表格中的表頭(Heading)
本例演示如何顯示表格表頭。
帶有標(biāo)題的表格
本例演示一個(gè)帶標(biāo)題 (caption) 的表格
跨行或跨列的表格單元格
本例演示如何定義跨行或跨列的表格單元格。
表格內(nèi)的標(biāo)簽
本例演示如何顯示在不同的元素內(nèi)顯示元素。
單元格邊距(Cell padding)
本例演示如何使用 Cell padding 來創(chuàng)建單元格內(nèi)容與其邊框之間的空白。
單元格間距(Cell spacing)
本例演示如何使用 Cell spacing 增加單元格之間的距離。
HTML 表格標(biāo)簽
| 標(biāo)簽 | 描述 |
|---|---|
| <table> | 定義表格 |
| <th> | 定義表格的表頭 |
| <tr> | 定義表格的行 |
| <td> | 定義表格單元 |
| <caption> | 定義表格標(biāo)題 |
| <colgroup> | 定義表格列的組 |
| <col> | 定義用于表格列的屬性 |
| <thead> | 定義表格的頁眉 |
| <tbody> | 定義表格的主體 |
| <tfoot> | 定義表格的頁腳 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
. 表格屬性
屬性名稱用途取自border-collapse設(shè)置或檢索表格的行和單元格的邊是合并還是獨(dú)立。separate： 邊框獨(dú)立 collapse： 相鄰邊被合并border-spacing邊框獨(dú)立時(shí)，單元格與單元格之間的間距數(shù)字，不允許負(fù)值empty-cells設(shè)置或檢索當(dāng)表格的單元格無內(nèi)容時(shí)，是否顯示該單元格的邊框。hide：隱藏該單元格的邊框。 show：顯示該單元格的邊框。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格屬性</title>
<style>
.separate{
width: 200px;
height: 200px;
border-collapse:separate;
border-spacing:10px;
empty-cells: hide;
}
</style>
</head>
<body>
<table border="1" class="separate">
<tr id="tr1">
<td>separate--邊框獨(dú)立</td>
<td>separate--邊框獨(dú)立</td>
<td>separate--邊框獨(dú)立</td>
</tr>
<tr>
<td>collapse--相鄰邊被合并</td>
<td>collapse--相鄰邊被合并</td>
<td></td>
</tr>
</table>
</body>
</html>
2. 布局屬性
屬性名稱用途取值display設(shè)置或檢索對(duì)象是否及如何顯示。none： 隱藏對(duì)象。不為被隱藏的對(duì)象保留其物理空間
block： 指定對(duì)象為塊元素visibility定義了元素是否可見visible： 設(shè)置對(duì)象可視 保留物理空間
hidden： 設(shè)置對(duì)象隱藏
collapse： 主要用來隱藏表格的行或列。隱藏的行或列能夠被其他內(nèi)容使用。對(duì)于表格外的其他對(duì)象，其作用等同于hidden。float定義了元素向左或者向右浮動(dòng)放置none： 設(shè)置元素不浮動(dòng)
left： 設(shè)置元素浮在左邊
right： 設(shè)置元素浮在右邊
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
<style>
.table{
width: 300px;
height: 300px;
background-color: red;
display: block;
}
img{
width: 300px;
height: 300px;
visibility: visible;
}
</style>
-->
<style>
.test{
width: 300px;
height: 300px;
float: right;
background-color: red;
}
.table{
width: 300px;
height: 300px;
float: right;
background-color: blue;
}
</style>
</head>
<body>
<div class="test">我將出現(xiàn)在屏幕右方1</div>
<div class="table">我將出現(xiàn)在屏幕右方2</div>
<br>
<img src="css1.jpg"/>
</body>
</html>
3. 定位屬性
屬性名稱用途取值position指定一個(gè)元素在文檔中的定位方式。static：默認(rèn)。
relative:相對(duì)定位[對(duì)象遵循常規(guī)流,不會(huì)影響常規(guī)流中的任何元素]
absolute：絕對(duì)定位 [對(duì)象脫離常規(guī)流]top定義了元素的上外邊距邊界與其包含塊上邊界之間的偏移數(shù)字，不允許負(fù)值right定義了元素的右外邊距邊界與其包含塊右邊界之間的偏移數(shù)字，不允許負(fù)值bottom定義了元素的底外邊距邊界與其包含塊底邊界之間的偏移數(shù)字，不允許負(fù)值left定義了元素的左外邊距邊界與其包含塊左邊界之間的偏移數(shù)字，不允許負(fù)值z(mì)-index定義一個(gè)元素在文檔中的層疊順序數(shù)字【數(shù)值越大就會(huì)在最上面】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
<style>
#div1{
width: 200px;
height: 300px;
background-color: red;
position: absolute;
top: 100px;
}
#div2{
width: 200px;
height: 200px;
background-color: blue;
}
</style>
-->
<style>
#test1,#test2,#test3,#test4 {
position: absolute;
width: 200px;
height: 100px;
padding: 5px 10px;
color: #fff;
text-align: right;
}
#test1{
z-index: 1;
font-size: 10px;
background-color: red;
}
#test2{
z-index: 2;
font-size: 10px;
top: 30px;
left: 30px;
background-color: blue;
}
#test3{
z-index: 3;
font-size: 10px;
top: 60px;
left: 60px;
background-color: black;
}
#test4{
z-index: 4;
font-size: 10px;
top: 90px;
left: 90px;
background-color: yellow;
}
</style>
</head>
<body>
<!--
<div id="div1">
</div>
<div id="div2">
</div>
-->
<div id="test1">z-index:1</div>
<div id="test2">z-index:2</div>
<div id="test3">z-index:3</div>
<div id="test4">z-index:4</div>
</body>
</html>
變換屬性設(shè)置
2D Transform Functions：
matrix()： 【矩陣變換】以一個(gè)含數(shù)值的(a,b,c,d,e,f)變換矩陣的形式指定一個(gè)2D變換，相當(dāng)于直接應(yīng)用一個(gè)[a,b,c,d,e,f]變換矩陣
translate()： 指定對(duì)象的2D translation（2D平移）。第一個(gè)參數(shù)對(duì)應(yīng)X軸，第二個(gè)參數(shù)對(duì)應(yīng)Y軸。如果第二個(gè)參數(shù)未提供，則默認(rèn)值為0
scale()： 指定對(duì)象的2D scale（2D縮放）。第一個(gè)參數(shù)對(duì)應(yīng)X軸，第二個(gè)參數(shù)對(duì)應(yīng)Y軸。如果第二個(gè)參數(shù)未提供，則默認(rèn)取第一個(gè)參數(shù)的值
rotate()指定對(duì)象的2D rotation（2D旋轉(zhuǎn)），需先有 <’’ transform-origin '> 屬性的定義
3D Transform Functions：
matrix3d()： 以一個(gè)4x4矩陣的形式指定一個(gè)3D變換
translate3d()：
指定對(duì)象的3D位移。第1個(gè)參數(shù)對(duì)應(yīng)X軸，第2個(gè)參數(shù)對(duì)應(yīng)Y軸，第3個(gè)參數(shù)對(duì)應(yīng)Z軸，參數(shù)不允許省略
rotate3d()： 指定對(duì)象的3D旋轉(zhuǎn)角度，其中前3個(gè)參數(shù)分別表示旋轉(zhuǎn)的方向x,y,z，第4個(gè)參數(shù)表示旋轉(zhuǎn)的角度，參數(shù)不允許省略
scale3d()： 指定對(duì)象的3D縮放。第1個(gè)參數(shù)對(duì)應(yīng)X軸，第2個(gè)參數(shù)對(duì)應(yīng)Y軸，第3個(gè)參數(shù)對(duì)應(yīng)Z軸，參數(shù)不允許省略
頁編程之表格樣式。
同學(xué)們好，我是一名免費(fèi)的少兒編程老師。今天我要分享的內(nèi)容是以列為單位設(shè)置表格樣式。在插入表格課程中，我已經(jīng)講解了HTML中沒有單獨(dú)的列標(biāo)簽，列是由對(duì)應(yīng)的單元格組成的行形成的。雖然如此，但列這個(gè)概念仍然是存在的。
讓我們來看一下今天的示例效果。這個(gè)網(wǎng)頁上有一個(gè)3行3列的表格，其中3列分別是姓名、科目和分?jǐn)?shù)，而3行分別是表頭行、字體加粗的內(nèi)容和兩行。第一列和第二列的背景顏色是綠色，第三列的背景顏色是灰色。在一列中，每一個(gè)單元格的樣式都是統(tǒng)一的。
接下來，讓我們看看實(shí)現(xiàn)的代碼。以列為單位設(shè)置表格樣式，實(shí)際上是通過這兩個(gè)標(biāo)簽來實(shí)現(xiàn)的，分別是colgroup和col。colgroup翻譯過來就是“列”的意思，而colgroup則是“列主”的意思。
首先，讓我們來看看colgroup標(biāo)簽。這個(gè)標(biāo)簽是一個(gè)無屬性的圍堵標(biāo)簽，它的作用只有一個(gè)，即聲明這個(gè)標(biāo)簽內(nèi)包含的是本表格列的樣式。通過這個(gè)標(biāo)簽，我們可以向整個(gè)列應(yīng)用樣式，而不需要為每一個(gè)單元格或每一行設(shè)置樣式。
這個(gè)標(biāo)簽必須在table標(biāo)簽內(nèi)，如果有caption標(biāo)簽，則必須在thead標(biāo)簽之前使用。如果不明白各標(biāo)簽的先后順序，可以看看上節(jié)課的內(nèi)容。colgroup標(biāo)簽僅僅是聲明，具體的樣式是要使用col標(biāo)簽來實(shí)現(xiàn)的。col標(biāo)簽的數(shù)量應(yīng)該與TDTH的標(biāo)簽數(shù)量一致，一一對(duì)應(yīng)地設(shè)置。第1行的col標(biāo)簽對(duì)應(yīng)第1列的樣式，第2行的col標(biāo)簽對(duì)應(yīng)第2列的樣式，以此類推。
有些同學(xué)會(huì)問，老師，你這里的表格有三列，但是你只寫了兩個(gè)col標(biāo)簽，這時(shí)候就要講到col標(biāo)簽在HTML5中的兩個(gè)常用屬性，一個(gè)是col屬性，說明了這一行的col標(biāo)簽的樣式可以跨幾列。
例如，在這里將第一行的col標(biāo)簽的Span屬性設(shè)置為2，這就意味著這個(gè)樣式在當(dāng)前位置跨了兩列。換句話說，讓第一列和第二列使用了同一個(gè)樣式。
第二個(gè)屬性是它的style標(biāo)簽。這個(gè)style標(biāo)簽的內(nèi)容是CSS的一段代碼，通過這個(gè)屬性我們可以為列添加各種效果。嚴(yán)格來說，style并不是卡標(biāo)簽的一個(gè)專用屬性，而是HTML的全局屬性之一。所謂的全局屬性就是只要是HTML標(biāo)簽都自帶這一個(gè)屬性。對(duì)于各位同學(xué)來說，這是一個(gè)新概念，你們只需要記住就可以了。通過使用colgroup標(biāo)簽和col標(biāo)簽的配合，我們不僅能夠靈活快速地為表格添加樣式，進(jìn)行美化，還能大幅減少代碼量，提高頁面加載速度。
以上就是今天的分享，希望各位同學(xué)能夠牢記在心，并在下一次練習(xí)中做到不看視頻也能夠?qū)懗龃a。如果需要獲取相關(guān)案例和文檔，可以向我提問。我們下期再見。如果你對(duì)網(wǎng)頁編程、服務(wù)端編程、數(shù)據(jù)庫、算法等感興趣，歡迎點(diǎn)贊、關(guān)注！
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
