Web前端1

表格的組成部分：

    標(biāo)題 表頭 主體 表尾

Table 定義一個表格

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

Caption 定義表格的標(biāo)題

<caption>web前/caption>端1<

Thead 定義表頭的部分

<thead>
				<tr>
					<th>學(xué)號</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">人數(shù)合計:</td>
						<td>60</td>
					</tr>
				</tfoot>
			</tbody>

Tfoot 定義表尾，一般來顯示匯總信息

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

Tr 定義一行

<tr>
					<th>學(xué)號</th>
					<th>姓名</th>
					<th>性別</th>
					<th>年齡</th>
				</tr>

Th td 定義數(shù)據(jù)項（單元格） th 一般用于表頭，有加粗的樣式

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

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

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

<td colspan="3">人數(shù)合計:</td>

Cellspacing 定義表格的間距

Cellpadding 定義表格的邊距

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

Div 定義一個分塊 （division）

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

特點：在新的一行顯示  塊級標(biāo)簽

塊級標(biāo)簽 與 行內(nèi)標(biāo)簽的區(qū)別：

塊級標(biāo)簽占滿行  行內(nèi)標(biāo)簽會按照順序從左到右依次排列

塊級標(biāo)簽：h1-h6  p  ul  ol  li  div table  dl  form

行內(nèi)標(biāo)簽：span  a  br lable  I  em

塊級元素的特點：display:block

• 每個塊都是從新的一行開始，后面的元素會另起一行
• 元素的寬度、高度、行高、內(nèi)外邊距都是可設(shè)置的
• 如果不設(shè)置元素的寬度，是他父容器的100%，除非你給他設(shè)定高度

行內(nèi)元素的特點：display：inline

• 和其他的元素都在一行上
• 不能設(shè)置元素的寬度，高度，行高，內(nèi)外邊距
• 元素的寬度是他包含文字或圖片的寬度，不能改變

行內(nèi)塊元素的特點：display：inline-block

• 和其他的元素都在一行上
• 寬度，高度，行高，內(nèi)外邊距都可以設(shè)置的

總結(jié)

到此這篇關(guān)于淺析Table 和 div 的簡介及用法的文章就介紹到這了,更多相關(guān)Table 和 div 的簡介及使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評論