肖sir_html之表格標簽

格標簽：

table 表格標簽

熟悉表格常用的單詞：
border 邊距，align 格式：‘ center’ 對齊，cellspacing 單元格與單元格的距離，cellpadding 單元格與內容的距離，wedth 寬度，height 高度，tr 表示：行，th 表示：表頭，td ：表示列

編輯表格：

生成表格：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

過昨天的學習算是對HTML有了一點點了解，知道了什么是前端，什么是HTML、前端三大標準、主流瀏覽器和html的基本結構及常用標簽。那么今天繼續看看html還有什么新的知識吧。

特殊字符（了解即可）

有常見性就有特殊性，我們使用電腦時經常會用到空格鍵，在html文檔上有時也會使用到空格鍵等等，那怎么在html上又是以什么形式展示給瀏覽器解析呢？

瀏覽器顯示結果	特殊字符名稱	HTML編輯字符
	空格	& n b s p;
<	小于號	& l t ；
>	大于號	& g t；
&	和	& a m p；
?	版權	& c o p y ；

表格標簽

作用：在瀏覽器上清晰美觀地顯示、展示數據。

表格標簽的語法

<table>

<tr>

</tr>

</table>

表格標簽：<table></table>，一個table標簽中可嵌套多個tr標簽。

行標簽：<tr></tr>，一個tr標簽代表一行。一個行標簽中可以嵌套多個單元格標簽。

單元格標簽：<td></td>，一個td標簽代表一個單元格。在單元格中可以填充文本、圖片、超鏈接等等內容。

在html中表格不是由橫線劃分行和列，而是大大小小的矩形盒子來劃分。Table是一個最大的矩形盒子，里面包含tr標簽，這個是一個和table長度差不多的矩形盒子，table一行僅容納一個tr盒子。在tr盒子中還包含有N個td盒子，td盒子就是單元格。

表格示例：

在html文檔中編輯表格標簽結構時，除了一個標簽一個標簽地敲之外，可以使用快捷方式快速操作：如五行三列的表格，可以在table標簽中輸入：“tr*5>td*3”然后敲回車，就將其表格結構迅速展現出來。

<h1>表格示例：</h1>
<table>
        <tr>
            <td>姓名</td>
            <td>性別</td>
            <td>年齡</td>
        </tr>
        <tr>
            <td>張三豐</td>
            <td>男</td>
            <td>27</td>
        </tr>
        <tr>
            <td>李四喜</td>
            <td>女</td>
            <td>18</td>
        </tr>
        <tr>
            <td>王五通</td>
            <td>男</td>
            <td>35</td>
        </tr>
        <tr>
            <td>秦六夏</td>
            <td>女</td>
            <td>30</td>
        </tr>
</table>

運行界面示例：默認狀態下表格是沒有線條分界，表格對齊方式左對齊。

表頭單元格標簽

<th></th>：位于表格的第一行或第一列，可以使其內容加粗居中顯示。

語法：

<table>

<th>

</th>

</table>

表頭表格代碼示例：

<h1>表頭表格示例：</h1>
   <table>
        <tr>
            <th>姓名</th>
            <th>性別</th>
            <th>年齡</th>
        </tr>
        <tr>
            <td>張三豐</td>
            <td>男</td>
            <td>27</td>
        </tr>
        <tr>
            <td>李四喜</td>
            <td>女</td>
            <td>18</td>
        </tr>
        <tr>
            <td>王五通</td>
            <td>男</td>
            <td>35</td>
        </tr>
        <tr>
            <td>秦六夏</td>
            <td>女</td>
            <td>30</td>
        </tr>
    </table>

運行界面示例：

表格結構標簽

表格結構標簽分為表格頭部標簽和表格主體標簽。類似于head標簽和body標簽對于html標簽之間的關系。

表格頭部標簽：<thead></thead>。定義表格頭部，嵌套在<table></table>中，一般位于第一行。

表格主體標簽：<tbody></tbody>。定義表格主體，嵌套在<table></table>中，主要用于顯示數據。

代碼示例：

<h1>表格結構標簽</h1>
    <table border="1" width="300px" height="150px" cellspacing="0">
        <thead>
            <tr>
                <th>姓名</th>
                <th>性別</th>
                <th>年齡</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>張三豐</td>
                <td>男</td>
                <td>36</td>
            </tr>
            <tr>
                <td>李四喜</td>
                <td>女</td>
                <td>30</td>
            </tr>
        </tbody>
    </table>

運行界面：

表格屬性

雖然表格屬性在實際開發過程中不常使用，一般都是通過CSS樣式設置，但是還是需要記住這些屬性關鍵詞，在css中屬性關鍵詞也會用到。

注：這些屬性都要寫在table標簽的開始標簽中，多個屬性之間需要使用空格分隔。

align：表格的對其方式。

align=“left”：在瀏覽器中居左顯示。也是默認顯示。

align=“center”：在瀏覽器中居中顯示。

align=“right”：在瀏覽器中居右顯示。

border：表格是否具有邊框。

border=”1”：表格添加邊框。

cellpadding：單元格內的元素和td邊框的距離。

舉個例子，如果表格是一件教室的話，桌子就是單元格，桌子上放的書本就是單元格內的元素，書本邊緣和桌子邊緣之間產生的空白區域就是cellpadding的值。

cellspacing：單元格和單元格之間的距離。默認是有空隙的，可設置為零，使其空隙清零，成為一條直線。

還是以教室為表格，桌子為單元格。桌子和桌子之間的距離就是cellspacing的值。

width：表格的寬度，屬性值可以是像素值也可以是百分比。

height：表格的高度，屬性值可以是像素值也可以是百分比。

代碼示例：

<h1>表頭表格示例：</h1>
    <table align="center" border="1" cellpadding="0" cellspacing="0" width="200px" height="300px">
        <tr>
            <th>姓名</th>
            <th>性別</th>
            <th>年齡</th>
        </tr>
        <tr>
            <td>張三豐</td>
            <td>男</td>
            <td>27</td>
        </tr>
        <tr>
            <td>李四喜</td>
            <td>女</td>
            <td>18</td>
        </tr>                   
        <tr>
            <td>王五通</td>
            <td>男</td>
            <td>35</td>
        </tr>
        <tr>
            <td>秦六夏</td>
            <td>女</td>
            <td>30</td>
        </tr>
    </table>

運行界面：

合并單元格

合并單元格是指將兩個或兩個以上的單元格合并成一個單元格。合并屬性一般寫在單元格標簽的開始標簽上。合并代碼屬性設置后，要將沒有寫合并的單元格代碼的其他合并單元格標簽刪除掉。

目標單元格：（合并代碼存在位置）

跨行合并：最上側單元格為目標單元格，寫合并代碼。

跨列合并：最左側單元格為目標單元格，寫合并代碼。

合并單元格的方式：

跨行合并：將處于不同行的單元格進行合并

語法：rowspan=“合并單元格個數”

代碼示例：

<h1>跨行合并表格：</h1>
    <table border="1" width="300px" height="150px" cellspacing="0">
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

運行界面：

跨列合并：將處于不同列的單元格進行合并

語法：colspan=“合并單元格個數”

代碼示例：

<h1>跨列合并表格：</h1>
    <table border="1" width="300px" height="150px" cellspacing="0">
        <tr>
            <td colspan="2"></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

運行示例：

今天學習的表格內容就到這里了，明天開始學習列表。

<html>
	<head> 
		標題 ---此處放置標題、導航、登錄等內容
		<!此處放置標題、導航、登錄等內容--->
	</head>
	<body> 
		<!此處放置頁面主要內容--->
		<! ：空格
		<: 小于號
		>: 大于號
		": 引號--->
		<p>第一段 世界大勢，合久必分，分久必合。</p>
		<hr/> <!表示單行橫線顯示--->
		<br/> <!表示換行--->
		<h1> hello world, html is easy</h1>
		<h2> hello world, html is easy</h2>
		<h3> hello world, html is easy</h3>
		<h4> hello world, html is easy</h4>
		<h5> hello world, html is easy</h5>
		<h6> hello world, html is easy</h6>
		<p>普通字體</p>
		<b>粗體</b> <i>斜體</i> <del>本文字已被刪除，請忽略</del>
		
		<p> hello     world</p>  <!段落標記--->
		<a href="http://www.baidu.com" target="_self"> 點擊進入百度</a>
		<br/>
		<img src="http://mysite.com/mypic.png" alt="網站作者照片">
		<h3> 普通無邊框表格：</h3>
		<table>
		<tr>
			<td>row 1 cell 1</td> <td>row 1 cell 2</td> <td>row 1 cell 3</td>
		</tr>
		<tr>
			<td>row 2 cell 1</td> <td>row 2 cell 2</td> <td>row 2 cell 3</td>
		</tr>
		</table>
		
		<h3>帶表頭，有邊框，有跨列單元:</h3>
		<table border="1">
		<tr>
			<th>head1</th> <th>head2</th> <th>head3</th>
		</tr>
		<tr>
			<td>row 1 cell 1</td> <td>row 1 cell 2</td> <td>row 1 cell 3</td>
		</tr>
		<tr>
			<td>row 2 cell 1</td> <td>row 2 cell 2</td> <td>row 2 cell 3</td>
		</tr>
		</table>
		
		<h3>三種列表的表達方式:</h3>
		<table cellpadding="2" cellspacing="2">
		<tr>
			<td>
				<ul><li>python</li> <li>c++</li> <li>java</li> <li>golang</li></ul>
			</td>
			<td>
				<ol><li>python</li> <li>c++</li> <li>java</li> <li>golang</li></ol>
			</td>
		</tr>
		</table>
		<dl>
			<dt>CPU</dt><dd>處理器</dd>
			<dt>MEM</dt><dd>內存</dd>
		</dl>
		
		<body bgcolor="#FF0000">
		<body bgcolor="RGB(255,0,0)">
		<body bgcolor="RED">
		
		<p>視頻</p>
		<object
			classid="clsid:d27sfsfstqwetsasasdfsdfs"
			codebase="http://fpdownload.macromedia.com/pub/shckwave/cabs/flash/swflash.cab">
			<embed src="flashfile.swf" width="300" height="200"></embed>
		</object>
		<br/>
		
		<p>音頻</p>
		<audio controls="crontrols">
			<source src="sample_song.mp3" type="audio/mp3" />
		</audio>
		
		<br/>
		<p>視頻</p>
		<video controls="controls"/>
			<source src="sample_video.mp4" type="video/mp4">
		</video>
		
	    <p>html表單---文本輸入</p>
		<table>
			<tr>
				<td>用戶名：</td>
				<td><input type="text" name="name"></td>
				<td>密碼：</td>
				<td><input type="password" name="pass"></td>
			</tr>
			<tr>
			<tdcolspan="4"> <textarea name="comment" rows="5" cols="60"> </textarea></td>
			</tr>
		</table>
		
		<table>
			<tr>
				<td>性別：</td>
				<td>用戶名：</td>
				<td>男性<input type="radio" checked='checked' name="sex" value="male" /></td>
				<td>女性<input type="radio" checked='checked' value="female" /></td>
			</tr>
			<tr>
			<tdcolspan="4"> <textarea name="comment" rows="5" cols="60"> </textarea></td>
			</tr>
		</table>
		
	</body>

</html>

在線咨詢

上一篇：「項目實戰」從終端到瀏覽器：實現 ANSI 字體在前端頁面的彩色展示
下一篇：Javascript 知識點總結

您的項目需求

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

整合營銷服務商

肖sir_html之表格標簽

特殊字符（了解即可）

表格標簽

您的項目需求