整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
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，我們一起飛！
. 表格屬性
屬性名稱用途取自border-collapse設置或檢索表格的行和單元格的邊是合并還是獨立。separate： 邊框獨立 collapse： 相鄰邊被合并border-spacing邊框獨立時，單元格與單元格之間的間距數字，不允許負值empty-cells設置或檢索當表格的單元格無內容時，是否顯示該單元格的邊框。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--邊框獨立</td>
<td>separate--邊框獨立</td>
<td>separate--邊框獨立</td>
</tr>
<tr>
<td>collapse--相鄰邊被合并</td>
<td>collapse--相鄰邊被合并</td>
<td></td>
</tr>
</table>
</body>
</html>
2. 布局屬性
屬性名稱用途取值display設置或檢索對象是否及如何顯示。none： 隱藏對象。不為被隱藏的對象保留其物理空間
block： 指定對象為塊元素visibility定義了元素是否可見visible： 設置對象可視 保留物理空間
hidden： 設置對象隱藏
collapse： 主要用來隱藏表格的行或列。隱藏的行或列能夠被其他內容使用。對于表格外的其他對象，其作用等同于hidden。float定義了元素向左或者向右浮動放置none： 設置元素不浮動
left： 設置元素浮在左邊
right： 設置元素浮在右邊
<!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">我將出現在屏幕右方1</div>
<div class="table">我將出現在屏幕右方2</div>
<br>
<img src="css1.jpg"/>
</body>
</html>
3. 定位屬性
屬性名稱用途取值position指定一個元素在文檔中的定位方式。static：默認。
relative:相對定位[對象遵循常規流,不會影響常規流中的任何元素]
absolute：絕對定位 [對象脫離常規流]top定義了元素的上外邊距邊界與其包含塊上邊界之間的偏移數字，不允許負值right定義了元素的右外邊距邊界與其包含塊右邊界之間的偏移數字，不允許負值bottom定義了元素的底外邊距邊界與其包含塊底邊界之間的偏移數字，不允許負值left定義了元素的左外邊距邊界與其包含塊左邊界之間的偏移數字，不允許負值z-index定義一個元素在文檔中的層疊順序數字【數值越大就會在最上面】
<!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>
變換屬性設置
2D Transform Functions：
matrix()： 【矩陣變換】以一個含數值的(a,b,c,d,e,f)變換矩陣的形式指定一個2D變換，相當于直接應用一個[a,b,c,d,e,f]變換矩陣
translate()： 指定對象的2D translation（2D平移）。第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則默認值為0
scale()： 指定對象的2D scale（2D縮放）。第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則默認取第一個參數的值
rotate()指定對象的2D rotation（2D旋轉），需先有 <’’ transform-origin '> 屬性的定義
3D Transform Functions：
matrix3d()： 以一個4x4矩陣的形式指定一個3D變換
translate3d()：
指定對象的3D位移。第1個參數對應X軸，第2個參數對應Y軸，第3個參數對應Z軸，參數不允許省略
rotate3d()： 指定對象的3D旋轉角度，其中前3個參數分別表示旋轉的方向x,y,z，第4個參數表示旋轉的角度，參數不允許省略
scale3d()： 指定對象的3D縮放。第1個參數對應X軸，第2個參數對應Y軸，第3個參數對應Z軸，參數不允許省略
頁編程之表格樣式。
同學們好，我是一名免費的少兒編程老師。今天我要分享的內容是以列為單位設置表格樣式。在插入表格課程中，我已經講解了HTML中沒有單獨的列標簽，列是由對應的單元格組成的行形成的。雖然如此，但列這個概念仍然是存在的。
讓我們來看一下今天的示例效果。這個網頁上有一個3行3列的表格，其中3列分別是姓名、科目和分數，而3行分別是表頭行、字體加粗的內容和兩行。第一列和第二列的背景顏色是綠色，第三列的背景顏色是灰色。在一列中，每一個單元格的樣式都是統一的。
接下來，讓我們看看實現的代碼。以列為單位設置表格樣式，實際上是通過這兩個標簽來實現的，分別是colgroup和col。colgroup翻譯過來就是“列”的意思，而colgroup則是“列主”的意思。
首先，讓我們來看看colgroup標簽。這個標簽是一個無屬性的圍堵標簽，它的作用只有一個，即聲明這個標簽內包含的是本表格列的樣式。通過這個標簽，我們可以向整個列應用樣式，而不需要為每一個單元格或每一行設置樣式。
這個標簽必須在table標簽內，如果有caption標簽，則必須在thead標簽之前使用。如果不明白各標簽的先后順序，可以看看上節課的內容。colgroup標簽僅僅是聲明，具體的樣式是要使用col標簽來實現的。col標簽的數量應該與TDTH的標簽數量一致，一一對應地設置。第1行的col標簽對應第1列的樣式，第2行的col標簽對應第2列的樣式，以此類推。
有些同學會問，老師，你這里的表格有三列，但是你只寫了兩個col標簽，這時候就要講到col標簽在HTML5中的兩個常用屬性，一個是col屬性，說明了這一行的col標簽的樣式可以跨幾列。
例如，在這里將第一行的col標簽的Span屬性設置為2，這就意味著這個樣式在當前位置跨了兩列。換句話說，讓第一列和第二列使用了同一個樣式。
第二個屬性是它的style標簽。這個style標簽的內容是CSS的一段代碼，通過這個屬性我們可以為列添加各種效果。嚴格來說，style并不是卡標簽的一個專用屬性，而是HTML的全局屬性之一。所謂的全局屬性就是只要是HTML標簽都自帶這一個屬性。對于各位同學來說，這是一個新概念，你們只需要記住就可以了。通過使用colgroup標簽和col標簽的配合，我們不僅能夠靈活快速地為表格添加樣式，進行美化，還能大幅減少代碼量，提高頁面加載速度。
以上就是今天的分享，希望各位同學能夠牢記在心，并在下一次練習中做到不看視頻也能夠寫出代碼。如果需要獲取相關案例和文檔，可以向我提問。我們下期再見。如果你對網頁編程、服務端編程、數據庫、算法等感興趣，歡迎點贊、關注！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
