HTML之表格標籤

carson0408發表於2018-03-16
HTML

        在網頁製作之中，表格標籤是常用的標籤之一，比如製作表格，或者利用表格的整齊性來設定頁面佈局。

<table></table>來用來製作表格，所以製作表格的語句在其之間；<tr></tr>則修飾表格行；而<td></td>修飾表格資料，這包含在<tr></tr>中。

        其中table有不少屬性，比如：border,bordercolor,cellspacing,width,height,bgcolor。boder表示外框邊線的粗細，bodercolor表示邊線的顏色，cellspacing表示單元格之間的空隙,width表示表格的寬，height表示表格的高，bgcolor表示背景色。

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<head>
	<title size="10" color="red">welcome to HTML</title>
</head>
<body>
	<table border="1" bordercolor="blue" cellspacing="0" width="400" height="150">
	
		<tr align="center">
			<td>姓名</td>
			<td>性別</td>
			<td>年齡</td>
		</tr>
		<tr>
			<td>carson</td>
			<td>男</td>
			<td>24</td>
		</tr>
		<tr>
			<td>thl</td>
			<td>女</td>
			<td>24</td>
		</tr>
		<tr>
			<td>Alice</td>
			<td>女</td>
			<td>24</td>
		</tr>
		
	</table>
</body>
</html>

得到如下網頁：


現在給表格設定個標題，這個有兩種，一個是設定在表格內，一個設定表格外，首先是設定表格外的：

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<head>
	<title size="10" color="red">welcome to HTML</title>
</head>
<body>
	<table border="1" bordercolor="blue" cellspacing="0" width="400" height="150">
		<caption>個人資訊</caption>
		<tr align="center">
			<td>姓名</td>
			<td>性別</td>
			<td>年齡</td>
		</tr>
		<tr>
			<td>carson</td>
			<td>男</td>
			<td>24</td>
		</tr>
		<tr>
			<td>thl</td>
			<td>女</td>
			<td>24</td>
		</tr>
		<tr>
			<td>Alice</td>
			<td>女</td>
			<td>24</td>
		</tr>
		
	</table>
</body>
</html>

得到如下網頁：


接下來展示標題在表格內，這時候需要用到colspan屬性值，表示合併列；與之相對應的是rowspan，表示行合併。

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<head>
	<title size="10" color="red">welcome to HTML</title>
</head>
<body>
	<table border="1" bordercolor="blue" cellspacing="0" width="400" height="150">
		<td colspan="3" align="center">個人資訊</td>
		<tr align="center">
			<td>姓名</td>
			<td>性別</td>
			<td>年齡</td>
		</tr>
		<tr>
			<td>carson</td>
			<td>男</td>
			<td>24</td>
		</tr>
		<tr>
			<td>thl</td>
			<td>女</td>
			<td>24</td>
		</tr>
		<tr>
			<td>Alice</td>
			<td>女</td>
			<td>24</td>
		</tr>
		
	</table>
</body>
</html>

得到如下結果：


三個人都是24歲，接下來使用rowspan合併三個年齡值為一個單元格。

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<head>
	<title size="10" color="red">welcome to HTML</title>
</head>
<body>
	<table border="1" bordercolor="blue" cellspacing="0" width="400" height="150">
		<td colspan="3" align="center">個人資訊</td>
		<tr align="center">
			<td>姓名</td>
			<td>性別</td>
			<td>年齡</td>
		</tr>
		<tr>
			<td>carson</td>
			<td>男</td>
			<td rowspan="3">24</td>
		</tr>
		<tr>
			<td>thl</td>
			<td>女</td>
		</tr>
		<tr>
			<td>Alice</td>
			<td>女</td>
		</tr>
		
	</table>
</body>
</html>

得到如下網頁：


相關文章