整合營銷服務(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ù)瀏覽器會把表頭顯示為粗體居中的文本：
<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，我們一起飛！
格元素詳解與練習(xí)
提到表格，大家最先想到的就是EXCEL這款軟件，實(shí)際上在對表格的操作上，HTML與EXCEL非常相似。
在展示數(shù)據(jù)，統(tǒng)計(jì)數(shù)據(jù)方面，表格比文字描述更具表達(dá)優(yōu)勢，在網(wǎng)頁中，表格也經(jīng)常被用來展示數(shù)據(jù)、計(jì)劃日常安排等內(nèi)容。如圖所示：
今天我們就來學(xué)習(xí)一下如何向頁面中添加表格元素。
首先來介紹一下表格元素中的基本標(biāo)簽。
NO.1：<table></table>
這個(gè)標(biāo)簽是書寫表格的第一個(gè)標(biāo)簽，它本身在頁面上看不出什么內(nèi)容，但是它的屬性可以控制表格顯示的全局樣式。這個(gè)標(biāo)簽的開始標(biāo)簽寫在表格元素的開頭，結(jié)尾標(biāo)簽寫在表格元素的結(jié)尾。
NO.2：<caption></caption>
這個(gè)標(biāo)簽是表格的標(biāo)題標(biāo)簽。
NO.3：<tr></tr>
這個(gè)標(biāo)簽定義表格的列標(biāo)簽。
NO.4：<th></th>
這個(gè)標(biāo)簽是列表標(biāo)題標(biāo)簽，例如，男生、女士、姓名等。
NO.5：<td></td>
這個(gè)標(biāo)簽定義表格的行標(biāo)簽。
OK，這些基本標(biāo)簽就可以構(gòu)建一個(gè)基礎(chǔ)的表格元素。示例代碼如下：
<table><!-- 寫在表格元素的開頭 --><caption>表格標(biāo)題</caption><!-- 表格標(biāo)題 --><tr>標(biāo)題標(biāo)簽<th>姓名</th><!-- 標(biāo)題標(biāo)簽 --><th>年齡</th></tr><tr><td>一列一行</td><td>一列二行</td></tr><tr><td>二列一行</td><td>二列二行</td></tr></table><!-- 寫在表格元素的結(jié)尾 -->
頁面效果如圖所示：沒有表格的外邊框。
如何添加外邊框呢？在<table>標(biāo)簽中修改border屬性即可，示例代碼如下：border="1"是給表格添加寬為1的邊界線。
<table border = "1"><!-- border="1"是給表格添加寬為1的邊界線 -->效果如圖所示：
這時(shí)，您會發(fā)現(xiàn)表格在頁面上的尺寸非常小，可不可以按照頁面尺寸來顯示表格嗎？當(dāng)然可以，這就需要為<table>標(biāo)簽修改第二個(gè)屬性width，示例代碼如圖所示：width = "100%"指的是表格寬度與平面寬度一致。
<table border = "1" width = "100%"><!-- width = "100%"指的是表格寬度與平面寬度一致 -->效果如圖所示：
ok！今天的講解先到這里，明天我會繼續(xù)為大家講解<thead></thead>、<tfoot></tfoot>、<tbody></tbody>三個(gè)標(biāo)簽，以及合并單元格操作。
今天的完整代碼示例如下：
<!DOCTYPE HTML>
<html>
<head>
<title>第一個(gè)網(wǎng)頁</title>
</head>
<body><h1>第一個(gè)網(wǎng)頁</h1><hr>
<h2>表格元素</h2><hr>
<table border = "1" width = "100%">
<caption>表格標(biāo)題</caption>
<tr>
<th>姓名</th>
<th>年齡</th>
</tr>
<tr><td>一列一行</td>
<td>一列二行</td>
</tr>
<tr>
<td>二列一行</td>
<td>二列二行</td>
</tr>
</table>
</body>
</html>正所謂萬丈高樓平地起，html技術(shù)雖然簡單，但是內(nèi)容相對繁瑣，也是以后進(jìn)一步學(xué)習(xí)網(wǎng)頁制作的基礎(chǔ)，希望大家動(dòng)手寫每一段代碼，把每一步踩堅(jiān)實(shí)。
喜歡的小伙伴請關(guān)注我，閱讀中遇到任何問題請給我留言，如有疏漏或錯(cuò)誤歡迎大家斧正，不勝感激！
HTML序章（學(xué)習(xí)目的、對象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁制作
第一個(gè)HTML頁面如何寫？——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML頁面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁制作
初識meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作
初識HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作
封閉在家學(xué)網(wǎng)頁制作！為頁面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單元素初識1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單元素初識2——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁制作
為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作
音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中使用<a>標(biāo)簽實(shí)現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁制作
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
