html中利用table進行佈局
阿新 • • 發佈：2019-02-14
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>利用table進行佈局</title>
</head>
<body>
<table table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#99bbbb;">
<h1 align="center">Main Title of Web Page</h1>
</td>
</tr>
<tr valign="top">
<td style="background-color:#ffff99;width: 100px;text-align:top;">
<b>Menu</b>
HTML<br/>
CSS<br />
Java Script
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;tex-align:top;">
Content goes here</td>
</tr>
<tr>
<td colspan="2" style="background-color:#99bbbb;text-align:center;">
Copyright W3School.com</td>
</tr>
</table>
</body>
</html>
<!-- 這個是利用table進行佈局，儘管是這個方法已經很少用了，但是我們可以看一下怎樣來對table進行應用，首先我們將這個結果作為一個表格，我們可以看到的是在這個結果，可以看成一個怎樣的表格，第一是含有三個行，兩個列，所以我們在這個table中應該出現的是三對<tr>...</tr>,並且對於第一行中的兩個列是合併的，其實我們在佈局的時候我們開始我們不的是考慮有幾列，因為我們列是有td這個表籤來確定的，並不是我們指定的，因為我們的是準備分成三行兩列 的
一個表格所以說我們應該做的是將第一行的兩個列進行合併，也就是利用的colspan這個標籤，然後我們要做的是，設然後我們要我這個設定顏色，是用到的的style在某一行td這個標籤中使用，我們想在這個表格上填寫什麼內容就可以在上面進行寫了，可以巢狀其他的標籤或者是文字，下面的設定都是和第一行的設定一樣的了，只是在二行中要建立兩個列，對於兩個列我們就要指明每一個列的寬度和高度，以及文字寫的位置，怎樣確定文字寫的位置用到的標籤是align，或者是valign
-->
<html>
<head>
<meta charset="utf-8">
<title>利用table進行佈局</title>
</head>
<body>
<table table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#99bbbb;">
<h1 align="center">Main Title of Web Page</h1>
</td>
</tr>
<tr valign="top">
<td style="background-color:#ffff99;width: 100px;text-align:top;">
<b>Menu</b>
HTML<br/>
CSS<br />
Java Script
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;tex-align:top;">
Content goes here</td>
</tr>
<tr>
<td colspan="2" style="background-color:#99bbbb;text-align:center;">
Copyright W3School.com</td>
</tr>
</table>
</body>
</html>
<!-- 這個是利用table進行佈局，儘管是這個方法已經很少用了，但是我們可以看一下怎樣來對table進行應用，首先我們將這個結果作為一個表格，我們可以看到的是在這個結果，可以看成一個怎樣的表格，第一是含有三個行，兩個列，所以我們在這個table中應該出現的是三對<tr>...</tr>,並且對於第一行中的兩個列是合併的，其實我們在佈局的時候我們開始我們不的是考慮有幾列，因為我們列是有td這個表籤來確定的，並不是我們指定的，因為我們的是準備分成三行兩列 的
一個表格所以說我們應該做的是將第一行的兩個列進行合併，也就是利用的colspan這個標籤，然後我們要做的是，設然後我們要我這個設定顏色，是用到的的style在某一行td這個標籤中使用，我們想在這個表格上填寫什麼內容就可以在上面進行寫了，可以巢狀其他的標籤或者是文字，下面的設定都是和第一行的設定一樣的了，只是在二行中要建立兩個列，對於兩個列我們就要指明每一個列的寬度和高度，以及文字寫的位置，怎樣確定文字寫的位置用到的標籤是align，或者是valign
-->