[html5入門-15]Html佈局中簡單的table的製作方法

阿新 • • 發佈：2019-01-19

在古老的瀏覽器網頁中，相當部分佈局是由table表格完成的，本文分享一下table標籤的一些用法和常用屬性設定。

如下圖所示，一個基本的單元格table除了整體寬高屬性之外還包括內部的標題單元格th，每一行的屬性tr，以及基本單元格td，分別對這些基本組成部分進行屬性設定即可做出所要求的表格。

以上圖表格的實現程式碼為例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.table1{
				width: 640px;
				height:90px;
			}
			.tr1{
				background: #dbe3fa;
			}
			#pic1{
				background: url(img/qing.png) no-repeat center;
				width: 65px;
			}
			#pic2{
				background: url(img/wan.png) no-repeat center;
				width: 65px;
			}
		</style>
	</head>
	<body>
		<table class="table1" border="1px" cellspacing="0px" cellpadding="8px"  >
			<tr class="tr1">
				<th colspan="2">日期</th><!--列合併用colspan-->
				<th colspan="2">天氣現象</th>
				<th>氣溫</th>
				<th>風向</th>
				<th>風力</th>		
			</tr>
			<tr>
				<td rowspan="2">22日星期五</td>
				<td>白天</td>
				<td id="pic1"></td>
				<td>晴轉多雲</td>
				<td style="color: #ff8000;">高溫7℃</td>
				<td>無持續風向</td>
				<td>微風</td>
			</tr>
			<tr>
				<td>夜間</td>
				<td id="pic2"></td>
				<td>晴</td>
				<td>低溫-4℃</td>
				<td>無持續風向</td>
				<td>微風</td>
			</tr>
		</table>
	</body>
</html>

1.設定表格整體屬性table

包括表格的寬width，高height，單元格邊框border，單元格之間距離cellspacing（若不設定此項為0，單元格則會成為一個個獨立分開的小格子），設定單元格內容到邊框距離cellpadding。

2.設定表格行tr

表格分為幾行就有幾個tr，再在每一行裡面設定th或td。

3.設定標題單元格th

標題th往往會佔幾列，需要使用colspan設定所佔列數，在下方的基本單元格td中就會按順序佔據一定列數。

4.設定基本單元格td

Td的數量要根據th所在的列數設定好，當td需要佔兩行時，需要用rowspan設定所在行數，而在下一個tr設定中，就不需要設定這個已經獨佔兩行的

td了。

5.可通過一些常用的屬性設定單元格背景顏色，插入圖片等，當cellspacing不為0時，也可以利用border-collapse：collapse屬性將兩個單元格之間的邊框合併增強美觀。

Table單元格的設定主要注意區分tr，th和tr，以及注意colspan和rowsspan所佔的列數和行數，基本操作上很簡單。

[html5入門-15]Html佈局中簡單的table的製作方法

在古老的瀏覽器網頁中，相當部分佈局是由table表格完成的，本文分享一下table標籤的一些用法和常用屬性設定。如下圖所示，一個基本的單元格table除了整體寬高屬性之外還包括內部的標題單元格th，

html佈局中圖片之間有間隙的解決方案

讓下面四個小圖合併在一起顯示通常我們這樣做，但間隙依然存在,甚至換行了 <html> <head> <meta charset="UTF-8"> &

【HTML5入門】解決eclipse中tomcat8080埠被佔用問題

配置tomcat後eclipse可能會報8080端口占用問題，tomcat預設8080埠，所以不管報哪些端口占用其實解決掉8080端口占用即可。比如會遇到下面的報錯情況： Several

HTML5 Canvas: 在HTML頁面中新增Canvas

原文: 本文翻譯自Steve Fulton & Jeff Fulton HTML5 Canvas, Chapter 1, “Adding Canvas to the HTML Page”. 在HTML頁面的<body>中，可以用像下面的程式碼來

儲存過程中簡單事務書寫方法

每一次Begin Transaction都會引起@@TranCount加1。而每一次Commit Transaction都會使@@TranCount減1，而RollBack Transaction會回滾所有的巢狀事務包括已經提交的事務和未提交的事務，而使@@TranCoun

android xml佈局中TextView文字居中方法

XML檔案內容如下： <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schem

HTML導航欄的多種製作方法

首先，大家可以直接使用html中的導航欄標籤<nav></nav> 具體程式碼如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

【linux中軟RAID製作方法】

linux中軟RAID製作方法【作業系統版本：】紅帽6.3 提示：在linux中磁碟裝置可以在/dev/目錄中找到其中IDE介面的硬碟在該目錄中以hd的檔名開頭 SATA介面的硬碟在該目錄中以sd的檔名開頭

[html5入門-5]html5中旋轉塊級元素的簡單小方法

在寫html5網頁時會遇到需要在塊級元素中傾斜的字型或需要插入傾斜的圖片，初學者（比如我）往往希望利用最少的程式碼來實現這個功能，現給大家分享一種程式碼拿去就可以用的簡單方法。舉例程式碼如下： <!DOCTYPE html> <html> &l

html中利用table進行佈局

<!DOCTYPE html> <html> <head> <meta charset="utf-8"><title>利用table進行佈局</title> </head> <

javscript 導出html中的table到excel

文件背景顏色 logs ted ons element fonts 釋放自定義 <script language="JavaScript" type="text/javascript"> /* * 默認轉換實現函數，如果需要其他功能，需自行擴展 * 參

Django中簡單添加HTML、css、js等文件

htm djang .py 項目移動資源默認 alt templates 首先申明下自己的環境， python版本3.65 Django版本1.11.15 創建默認Django項目後首先說下添加Html 在urls.py文件中添加如圖代碼，照抄也

http://www.cnblogs.com/chenmeng0818/p/6370819.html js中的正則表示式入門

http://www.cnblogs.com/chenmeng0818/p/6370819.html js中的正則表示式入門什麼是正則表示式呢？正則表示式(regular expression)描述了一種字串匹配的模式，可以用來檢查一個字串是否含有某

HTML之介面簡單分割佈局

HTML之介面簡單分割佈局 CSS-Code： <style> *{ margin: 0; padding: 0; } .top{ w

從零開始學習HTML+CSS（4）Flex佈局中的排列與換行

0.參考網址：https://www.runoob.com/w3cnote/flex-grammar.html 1.排列預設值：橫向排列（從左邊開始排） div { display:flex;/*設定為flex佈局*/ flex-direction:row;/*這

通過HTML中的table標籤設定Web頁面

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用table標籤設定Web頁面</title>

【HTML&CSS】簡單網頁佈局

一、學習內容回顧 ☆常用標籤列舉 <p></p>  <b></b>

js把html中的table資料匯出到Excel中

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" l

js 匯出 html 中的 table 表格為 excel (有效)

js 匯出 html 中的 table 表格為 excel 今天說一下如何將html中的表格匯出為 excel ，以後就不用麻煩後臺小夥伴了，話不多說，直接上程式碼 es6 <!DOCTYPE html> <html lang="en"> <

css筆記：在flex佈局和table-cell佈局中實現居中對齊的辦法

當使用 flex 佈局時，justify-content 表示主軸方向的位置佈局，align-items 表示從軸方向的佈局，text-align 表示文字佈局。主、從軸方向佈局有三種：flex-start、center、flex-end。可以通過fle

[html5入門-15]Html佈局中簡單的table的製作方法

相關推薦