html中怎么使用table

本文小編為大家詳細(xì)介紹“html中怎么使用table”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“html中怎么使用table”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

1. 普通表格，簡單的HTML表格由table元素以及tr、td和th元素組成，其中tr是指表格行，td是指單元格，th定義表頭?？諉卧窬椭苯硬惶罴纯?，或者用 。

<table>	
<tr>		
<th>表頭</th>		
<th>表頭</th>		
<th>表頭</th>	
</tr>	
<tr>		
<td>單元格1
</td>		
<td></td>		
<td>單元格3</td>	
</tr>	
</table>

2.帶有邊框的表格。border元素表示表格的邊框,默認(rèn)單位是px，cellspcing表示表格與表格之間的間距，cellpadding表示內(nèi)邊距/內(nèi)填充的距離。

<table border="1" cellspacing="10" cellpadding="30">
		<tr>
			<th>表頭</th>
			<th>表頭</th>
			<th>表頭</th>
		</tr>
		<tr>
			<td>單元格1</td>
			<td>單元格2</td>
			<td>單元格3</td>
		</tr>
	</table>

3.帶有背景圖片或顏色的表格，注意：bgcolor表示顏色，而background不能直接在html里面添加顏色(這句話說錯了，是使用的方式錯誤，直接使用內(nèi)聯(lián)樣式書寫的格式是style="background:red"或者是style="background-color:red")，在table中添加就是對整個表格設(shè)置，如果在單獨的tr或者td中設(shè)置就是對單獨的行或者單元格來進(jìn)行設(shè)置。

<table border="1">
		<tr>
			<th>表頭</th>
			<th>表頭</th>
			<th>表頭</th>
		</tr>
		<tr>
			<td>單元格1</td>
			<td>單元格2</td>
			<td>單元格3</td>
		</tr>
	</table>

4、跨行和跨列的表格，rowspan表示跨行，colspan表示跨列，跨列的話就在當(dāng)前表格行內(nèi)刪除，跨行的話就在下方的表格行內(nèi)刪除。

<table border="1">
	<caption>跨行</caption>
		<tr>
		  <th>姓名</th>
		  <td>Bill Gates</td>
		</tr>
		<tr>
		  <th rowspan="2">電話</th>
		  <td>555 77 854</td>
		</tr>
		<tr>
		  <td>555 77 855</td>
		</tr>
	</table>

<table border="1">
	<caption>跨列</caption>
		<tr>
		  <th>姓名</th>
		  <th colspan="2">電話</th>
	</tr>
	<tr>
		  <td>Bill Gates</td>
		  <td>555 77 854</td>
		  <td>555 77 855</td>
	</tr>
</table>

5.帶有標(biāo)題的表格，caption表示表格的標(biāo)題，也可以用其他標(biāo)簽比如p標(biāo)簽來定位表格標(biāo)題，但使用caption的好處是他會跟著表格一起走，默認(rèn)是在和表格居中對齊。

6.在表格單元中排列內(nèi)容，比如在單元格中添加段落，列表等。

<table border="1">
	<tr>
		<td>
			<p>這是一個段落，hello World！</p>
		</td>
		<td>
			<ul>
				<li>這是一個列表
					<ul>
						<li>html</li>
						<li>css</li>
						<li>javascript</li>
					</ul>
				</li>
			</ul>
		</td>
	</tr>
</table>

7.frame框架屬性，規(guī)定外側(cè)邊框的哪個部分是可見的。//暫時不會使用。

讀到這里，這篇“html中怎么使用table”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。