1. 程式人生 > >8.html表格相關的標記9.html表格實戰《簡單的網頁佈局》

8.html表格相關的標記9.html表格實戰《簡單的網頁佈局》

本文轉載於:猿2048網站8.html表格相關的標記9.html表格實戰《簡單的網頁佈局》

<html>
<head>
<title>第八課標題表格</title>
<meta charset="utf-8">
</head>
<body>
	<table width="960" height="250" border="1" align="center" cellpadding="10" rules="all">
		<caption align="top"> 表格的標題</caption>
		<tr bgcolor="#ccc" align="center" valign="center">
			<th bgcolor="red" >班級</th>
			<th>姓名</th>
			<th>年齡</th>
			<th>成績</th>
		</tr>
		<tr align="center" valign="center">
			<td>四年級一班</td>
			<td>張三</td>
			<td>16</td>
			<td>80</td>
		</tr>
		<tr  align="center" valign="center">
			<td>四年級一班</td>
			<td>李四</td>
			<td>14</td>
			<td bgcolor="#ccc"></td>
		</tr>
		<tr align="center" valign="center">
			<td>四年級一班</td>
			<td>王五</td>
			<td>18</td>
			<td>50</td>
		</tr>
		</table>
		<br/>
	<table width="960" height="250" border="1" align="center" cellpadding="10" rules="all">
		<tr bgcolor="#ccc" align="center" valign="center">
			<th bgcolor="red" >班級</th>
			<th>姓名</th>
			<th>年齡</th>
			<th>成績</th>
		</tr>
		<tr align="center" valign="center">
			<td>四年級一班</td>
			<td>張三</td>
			<td>16</td>
			<td>80</td>
		</tr>
		<tr  align="center" valign="center">
			<td>四年級一班</td>
			<td>李四</td>
			<td>14</td>
			<td bgcolor="green">90</td>
		</tr>
		<tr align="center" valign="center">
			<td>四年級一班</td>
			<td>王五</td>
			<td>18</td>
			<td>50</td>
		</tr>		
	</table>
</body>
</html>

  

 

<html>
<head>
<title>第八課標題網頁之戰佈局</title>
<meta charset="utf-8">
</head>
<body leftmargin="0" topmargin="0">
	<table border="0" width="960"  align="center" cellspacing="0" cellpadding="0">
		<tr height="90" bgcolor="red" align="center"><td><font size="6"><b>網頁的頭部</b></font></td></tr>
		<tr>
			<td>
				<table bgcolor="yellow" width="30%" height="500" align="left">
					<tr align="center"><td><font size="6"><b>網頁的左部分</b></td></tr>
				</table>
				<table bgcolor="green" width="70%" height="500" align="left">
					<tr align="center"><td><font size="6"><b>網頁的右部分</b></td></tr>
				</table>
			</td>
		</tr>
		<tr height="90" bgcolor="red" align="center"><td><font size="6"><b>網頁的底部</b></font></td></tr>
	</table>
</body>
</html>

涉及的知識:
1、topmargin="0" 你設計的框架裡網頁上方的距離是多少0就是沒有(英文翻譯上邊距)
2、leftmargin="0" 你設計的框架裡網頁左邊的距離是多少0就是沒有,如果居中顯示就不需要左邊了。(英文翻譯左邊距)
3、border="0"網頁的邊距
4、width="960"網頁的寬度,也可以用百分比來計算
5、align="center"劇中顯示
6、cellspacing="0" 單元格的間距
7、cellpadding="0" 單元格的邊距
8、height="500"網頁的高度,也可以用百分比來計算
9、<font size="6"> 可以設定字型的格式以及字型的大小
10、<b></b>字型加粗
11、<table><tr><td></td></tr></table> 表格,td是行,th是列。