淺析Table 和div 的簡介及用法

Web前端1

表格的組成：

標題表頭主體表尾

Table 定義一個表格

<table border="1" cellspacing="0" cellpadding="0" align="center">
</table>

Caption 定義表格的標題

<caption>web前/caption>端1<

Thead 定義表頭的部分

<thead>
				<tr>
					<th>學號</th>
					<th>姓名</th>
					<th>性別</th>
					<th>年齡</th>
				</tr>
			</thead>

Tbody 定義表格的主體

<tbody>
				<tr>
					<td>01</td>
					<td>張三</td>
					<td>男</td>
					<td>20</td>
				</tr>
				<tr>
					<td>02</td>
					<td>李四</td>
					<td>女</td>
					<td>21</td>
				</tr>
				<tfoot>
					<tr>
						<td colspan="3">人數合計:</td>
						<td>60</td>
					</tr>
				</tfoot>
			</tbody>

Tfoot 定義表尾，一般來顯示總結資訊

<tfoot>
					<tr>
						<td colspan="3">人數合計:</td>
						<td>60</td>
					</tr>
				</tfoot>

Tr 定義一行

<tr>
					<th>學號</th>
					<th>姓名</th>
					<th>性別</th>
					<th>年齡</th>
				</tr>

Th td 定義資料項（儲存格） th 一般用於表頭，有加粗的樣式

Td 一般用於主體部分，沒有加粗樣式

<tr>
					<td>01</td>
					<td>張三</td>
					<td>男</td>
					<td>20</td>
				</tr>

Td rowspan 和colspan 分別定義單元格跨行的行數，跨列的列數

<td colspan="3">人數合計:</td>

Cellspacing 定義表格的間距

Cellpadding 定義表格的邊距

<table border="1" cellspacing="0" cellpadding="10">

Div 定義一個分塊（division）

 <div style="width: 200px;height: 200px;background-color:skyblue";>

特點：在新的一行顯示區塊級標籤

區塊級標籤與行內標籤的區別：

區塊級標籤佔滿行行內標籤會依照順序從左到右依序排列

區塊級標籤：h1-h6 p ul ol li div table dl form

行內標籤：span a br lable I em

區塊級元素的特點：display:block

每個區塊都是從新的一行開始，後面的元素會另起一行元素的寬度、高度、行高、內外邊距都是可設定的如果不設定元素的寬度，是他父容器的100%，除非你給他設定高度

行內元素的特點：display：inline

和其他的元素都在一行上 不能設定元素的寬度，高度，行高，內外邊距 元素的寬度是他包含文字或圖片的寬度，不能改變

行內塊元素的特點：display：inline-block

和其他的元素都在一行上 寬度，高度，行高，內外邊距都可以設定的

總結

到此這篇關於淺析Table 和div 的簡介及用法的文章就介紹到這了,更多相關Table 和div 的簡介及使用內容請搜索downcodes.com以前的文章或繼續瀏覽下面的相關文章，希望大家以後多多支持downcodes.com！