零基礎10天學會網頁制作第二天（下）之表格table標簽

們繼續往下講述，關于a標簽的跳轉，我們用到的是href屬性，href里面對應的就是我們需要跳轉的地址，可以是本地文件的跳轉，也可以是網絡地址的跳轉，這個很簡單了，就不過多做贅述了。

大家有沒有發現，在上述的例子中，我們點擊a標簽后，跳轉的頁面都是在當前窗口打開的，在實際的開發中，如果說在新的窗口打開呢？那么我就需要a標簽的另一個屬性“target”，target這個屬性,可以使得我們選擇在當前頁面或者新窗口進行打開，默認不寫或者target=“_self”，是當前窗口，target=“_blank”，是在新的窗口打開。

我們舉個例子：

目錄結構

目前，零基礎這個文件夾里，有兩個文件，“a標簽.html”這個文件里的代碼如下：

代碼展示

跳轉地址為同目錄的“遠程圖片加載.html”文件，target屬性為_blank，在新的窗口打開，我們看下效果：

點擊

點擊后，打開新的窗口進行展示：

新窗口打開

上邊的例子，大家可以實際操作一下。

之前說過，a標簽，不僅僅可以是文字，也可以是圖片，比如我們給上邊的“遠程圖片加載.html”這個文件里的圖片，加上超鏈接，讓它跳轉到百度，代碼如下：

代碼

效果如下：

效果

點擊圖片后，跳轉到了百度

跳轉到百度

簡單吧，所以啊，老鐵們，網頁制作啊，沒什么好難的，輕輕松松都能學會。

3、表格標簽，table，tr，td

表格，對于我們來說，司空見慣，課程表啊，人員信息表啊，這些Excel我們經常用，那么如何在網頁上來表示表格呢？這就不得不提到table系列標簽。

table表示一個表格，每一行由tr來表示，每一列由td來表示，舉個很簡單的例子，1行1列，代碼如下：

代碼

大家可以看到，代碼這里，為了大家能夠直觀，很清晰地看到，我自己做了格式化，這里大家作為了一個了解就可以了，因為從第三天開始，我們就要鳥槍換炮，采用IDE進行開發，那簡直就是如虎添翼，開發起來，嗖嗖的，我們拭目以待。

好，我們看下代碼實現的效果，右鍵點擊打開方式為瀏覽器：

what？什么鬼？這就是表格，開玩笑的吧，沒開玩笑老鐵，這確確實實，就是上述代碼運行的效果，為什么和我們平常的表格不一樣，那是因為沒有添加屬性啊，來，上才藝，加上邊框，border，我們再來看下效果：

更改代碼如下：

上面的代碼，我們加上了表格的邊框，寬度為1，單位默認是像素，可帶可不帶，運行效果如下：

有的朋友看到上面的效果，可能就有疑問了，為什么會有兩個邊框呢？這是由于table標簽自帶的內外邊距所導致呢，如何去掉呢，很簡單，使用

cellpadding和cellspacing屬性就可以搞定，代碼如下：

效果如下：

這里對兩個屬性，做一個解釋，cellpadding,指的是單元格內容與其邊框之間的空白，我們來看個對比：

不設置cellpadding

代碼：

效果：

設置cellpadding為10：

代碼：

效果：

是不是很清晰地看到了，表格中的內容距離邊框明顯遠了，這就是cellpadding的作用。

我們再來看cellspacing，它指的是單元格之間的距離，我們看下對比：

不設置cellspacing：

代碼：

效果：

設置cellspacing為10：

代碼：

效果：

cellpadding和cellspacing屬性，大家不要搞混淆了，一個是內容到邊框的距離，一個單元格之間的距離。

來吧，實戰練習一下，下面這個表格呢，是我用畫圖工具畫的，對得不是很齊，將就著看哈，對于下面的表格，我們該如何實現呢？

首先呢，先分析，這個是很有必要的，即便以后，我們學有所成，做任何東西之前，也盡量要先分析，后寫代碼，通過上圖，我們可以看到，有有5行3列，那么對應的tr，也就是行，就會有5個，每個tr里，有4列，也就是有4個td，ok，我們直接上代碼：

代碼有點多，其實都是重復的，莫害怕，不截圖了，直接代碼塊，大家盡量自己寫，千萬別復制啊：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格練習</title>
</head>
<body>
 
<table border="1" cellpadding="0" cellspacing="0">
	<tr>
		<td>姓名</td>
		<td>年齡</td>
		<td>性別</td>
		<td>籍貫</td>
	</tr>
	<tr>
		<td>小趙</td>
		<td>12</td>
		<td>男</td>
		<td>北京</td>
	</tr>
	<tr>
		<td>小王</td>
		<td>23</td>
		<td>女</td>
		<td>上海</td>
	</tr>
	<tr>
		<td>老李</td>
		<td>36</td>
		<td>男</td>
		<td>鄭州</td>
	</tr>
	<tr>
		<td>老王</td>
		<td>68</td>
		<td>男</td>
		<td>廣州</td>
	</tr>
</table>
 
</body>
</html>

效果如下圖：

雖然效果出來了，但是，是不是感覺很小啊，怎么解決？老鐵們，前邊我們是不是講過圖片是如何控制大小的，通過寬width和高height這兩個屬性是吧，同樣的，這兩個屬性，也可以用于表格，我們不妨給當前表格設置，寬為500，高為300。

代碼如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格練習</title>
</head>
<body>
 
<table border="1" cellpadding="0" cellspacing="0" width="500" height="300">
	<tr>
		<td>姓名</td>
		<td>年齡</td>
		<td>性別</td>
		<td>籍貫</td>
	</tr>
	<tr>
		<td>小趙</td>
		<td>12</td>
		<td>男</td>
		<td>北京</td>
	</tr>
	<tr>
		<td>小王</td>
		<td>23</td>
		<td>女</td>
		<td>上海</td>
	</tr>
	<tr>
		<td>老李</td>
		<td>36</td>
		<td>男</td>
		<td>鄭州</td>
	</tr>
	<tr>
		<td>老王</td>
		<td>68</td>
		<td>男</td>
		<td>廣州</td>
	</tr>
</table>
 
</body>
</html>

效果如下：

效果明顯好轉了是吧，但是，問題來了，文字沒有居中，怎么搞？如果我們以后學了css樣式后，其實特別簡單，這里就先不擴展css的東西，還是先研究html，一點一點來，按部就班。文字居中，就需要用到align屬性，它有三個值，left，center，right，很明顯就是，左，中，右；來，我們設置居中：

這里呢，我們需要給每一個td，去添加這個屬性，這里我就不添加太多了，只給第一行添加了，大家練習的時候，可以都加上，我們看下效果：

因為，我只給第一行添加了居中，所以呈現出的效果就如上圖。

對于表格的練習，大家多練習練習，沒什么難的，分析好幾行幾列后，就用tr和td寫出來；上邊的表格，還差一個標題，標題如何去寫呢，之前已經學過了h系列標簽，還有p標簽，這兩個都可以使用，這里我們再學一個局限于表格的標題標簽，caption，我們直接上代碼：

還是上邊的例子啊，代碼就不全粘貼了，這里只貼了部分代碼：

效果如下：

基本上常規的表格，我們已經講述完了，我們再來看看，不常規的。

看到上圖，是一種什么感覺，是不是很直觀地發現，有單元格的合并效果，這個在表格里面很常見，但在代碼里該如何體現呢？首先我們先來了解下table的另兩個屬性，rowspan和colspan。

rowspan

跨行，也就是行與行之間合并，用法，rowspan=“2”，值為幾，就是合并幾行。

colspan

跨列，也就是列與列之間合并，用法，colspan=“2”，值為幾，就是合并幾列。

舉個例子：

先看代碼：

效果：

其實就是一個兩行兩列的代碼，現在呢，我想要把1和2合并，也就是列與列之間合并，怎么合并，使用colspan屬性唄，來，看代碼：

效果展示：

有一點需要注意，你合并之后，一定要把多余的給去掉，大家可以看到，在代碼中，第一行中，只有一個td標簽，因為你要合并兩個表格成為1個表格，所以，多余的要刪除，合并3個，4個及多個，都是這樣處理。

好，我們把代碼還原，進行合并1和3,1和3是行之間的合并，進而要使用rowspan，代碼如下：

效果如下：

注意：同樣的，你合并時，也要記得，把多余的給刪除，可以直接看代碼，我的實現。

經過簡單的練習后，那么我們直接實現剛開始的截圖效果吧，就是如下圖：

代碼實現

效果如下：

這里為了表格展示好看，我用了width屬性，具體大家可以看代碼，好了，table表格相關的，基本上就結束了，也給大家舉了很多例子，大家可以多寫寫，一定要掌握住哦。

4、文本格式化的使用

文本格式化，這個大家作為一個了解即可，所謂的文本格式，就是文本的樣式，比如，加粗，斜體，大號字，小號字，插入字，刪除字等。

我們找其中幾個簡單地展示一下，代碼如下：

效果如下：

文本格式，大家作為一個了解，因為這些內容后期，大部分都被css所代替，不過大家能夠掌握的話，也是一件好事，說個比較有意思的標簽，就是pre，這個是預格式文本，也就說，它會保留你書寫的格式。

比如代碼如下：

效果：

5、總結及回顧

第二天的內容比較多，總共分為了三篇文章進行講述，大家可以發現，基本上都是特別的詳細，我可以這樣說，這是目前網上關于網頁制作教程中是最詳細的，哈哈，有點飄了啊，之所以詳細呢，就是為了照顧到零基礎的朋友。

今天的總結回顧呢，兩個掌握的知識點：

1、a標簽的使用，本地和遠程地址的跳轉，新窗口的設置。

2、table標簽的使用，掌握住tr，td，設置內外邊距及單元格之間的合并。

今天的作業，就是把第二天當中所講的內容，自己好好地敲上一遍，好了，就到這里吧，拜拜，我們第三天見。

HTML表格的構建中，<tr>標簽（表格行）扮演著基礎而關鍵的角色。正確使用表格行不僅能夠提升數據展示的清晰度，還可以通過各種技巧增強表格的功能性和交互性。本文將深入探討如何高效利用<tr>標簽，從而在網頁設計中實現更精細、更專業的布局和表現。

1. 理解<tr>標簽的基本用途

1.1 <tr>標簽概述

在HTML中，<tr>標簽用于定義表格的行。每個<tr>元素內部可以包含一或多個<td>（表格單元格）或<th>（表頭單元格）元素，用于展示具體的數據或標題。

1.2 創建基本的表格行

一個典型的表格行示例如下：

<table>
    <tr>
        <th>編號</th>
        <th>姓名</th>
        <th>職位</th>
    </tr>
    <tr>
        <td>1</td>
        <td>王小明</td>
        <td>前端開發</td>
    </tr>
</table>

這個例子展示了如何使用<tr>來創建包含標題和一行數據的表格。

2. 樣式化表格行

2.1 改善行的視覺效果

通過CSS，我們可以對表格行進行樣式化，例如設置斑馬線效果（條紋表格）、行懸停顏色等，以提升可讀性和用戶體驗。

tr:nth-child(even) {
    background-color: #f2f2f2;
}
tr:hover {
    background-color: #ddd;
}

2.2 使用類和ID優化樣式控制

給表格行添加類或ID，可以更細致地控制特定行的樣式，這對于突出顯示某些數據非常有用。

3. 動態交互的實現

3.1 使用JavaScript處理行事件

可以通過JavaScript為表格行添加點擊事件，達到如彈出詳細信息、修改數據等交互效果。

document.querySelectorAll("tr").forEach(row => {
    row.addEventListener("click", function() {
        alert("你點擊了一行！");
    });
});

3.2 動態添加和刪除行

在需要動態修改表格內容的場景下，可以通過JavaScript動態地添加或刪除表格行。

function addRow() {
    const table = document.getElementById("myTable");
    const row = table.insertRow(-1);  // 插入到表格末尾
    const cell1 = row.insertCell(0);
    const cell2 = row.insertCell(1);
    cell1.innerHTML = "新行單元格1";
    cell2.innerHTML = "新行單元格2";
}

4. 結語

通過深入了解和運用<tr>標簽，你可以大幅提升HTML表格的功能性和視覺吸引力。無論是數據密集型網站還是需要高度定制的用戶界面，精通這些技巧將使你在網頁開發中更加得心應手。

結尾部分：
希望本文的分享能幫助你更好地掌握HTML中的<tr>使用技巧，無論是基礎的數據展示還是復雜的用戶交互，都能通過你的代碼得到完美的實現。不斷實踐，不斷創新，讓我們在編程的路上一起進步！

lt;thead>標簽定義HTML中<table>元素的標題；

<thead>標簽與<tbody>和<tfoot>標簽一起使用，它們定義HTML表格中的表頭，表主體和表腳。

<thead>標簽作為<table>標簽的子元素，需出現在<caption>、<colgroup>元素之后；<tbody>，<tr>或<tfoot>元素之前。

<thead>標記內應至少包含一行<tr>元素。

提示：<thead>、<tbody>和<tfoot>元素默認不會影響表格的布局。不過可以使用CSS來為這些元素定義樣式，從而改變表格的外觀。

語法格式

<thead>

<thead>

示例代碼

<table border="1">
    <caption>圖書大廈書目價格單</caption>  
    <thead>  
        <tr>  
            <th>書名</th>  
            <th>單價</th>  
        </tr>  
    </thead>  
    <tr>  
        <td>HTML入門教程</td>  
        <td>79.00元</td>  
    </tr>  
    <tr>  
        <td>JavaScript基礎教程</td>  
        <td>46.00元</td>  
    </tr>  
    <tr>  
        <td>Python精品教程</td>  
        <td>99.00元</td>  
    </tr>  
</table>  123456789101112131415161718192021復制代碼類型：[html]

效果展示：

圖書大廈書目價格單
書名	單價
HTML入門教程	79.00元
JavaScript基礎教程	46.00元
Python精品教程	99.00元

HTML4.01與HTML5差異

在HTML5中，不再支持HTML4.01中<thead>標簽的任何屬性。

瀏覽器支持

所有主流瀏覽器都支持<thead>標簽。

標簽屬性

屬性	值	描述
align	right left center justify char	HTML5 不支持。定義 <thead> 元素中內容的對齊方式。
char	character	HTML5 不支持。規定 <thead> 元素中內容根據哪個字符來對進行文本對齊。
charoff	number	HTML5 不支持。規定 <thead> 元素中內容的第一個對齊字符的偏移量。
valign	top middle bottom baseline	HTML5 不支持。規定 <thead> 元素中內容的垂直對齊方式。

全局屬性

<thead>標簽支持HTML的全局屬性。

事件屬性

<thead>標簽支持HTML的事件屬性。

開課吧廣場-人才學習交流平臺

在線咨詢

上一篇：如何在網頁中使用 web 字體？
下一篇：一個簡單的個人網站模板

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

零基礎10天學會網頁制作第二天（下）之表格table標簽

1. 理解<tr>標簽的基本用途

1.1 <tr>標簽概述

1.2 創建基本的表格行

2. 樣式化表格行

2.1 改善行的視覺效果

2.2 使用類和ID優化樣式控制

3. 動態交互的實現

3.1 使用JavaScript處理行事件

3.2 動態添加和刪除行

4. 結語

語法格式

示例代碼

效果展示：

HTML4.01與HTML5差異

瀏覽器支持

標簽屬性

全局屬性

事件屬性

您的項目需求