- 1PS提示：因為圖層已鎖定，無法編輯圖層的處理方法
- 2picacg蘋果版怎么找不到|picacg ios版是不是下架了介紹
- 3Adobe Illustrator CS5 序列號大全
- 4ACDsee注冊碼免費分享（含ACDsee18、ACDsee10等版本）
- 5PDF瀏覽器能看3D文件嗎？PDF瀏覽器看3D文件圖文詳細教程
- 6Potato(土豆聊天)怎么換頭像|Potato app更改頭像方法介紹
- 7Potato(馬鈴薯聊天)怎么注冊不了|Potato不能注冊處理方法介紹
- 8最新的Adobe Illustrator CS4序列號大全
- 9Intel i7-9700K性能跑分曝光：同代提升約12%
- 10qq郵件是否已讀怎么看 QQ郵箱已經發出去的郵件怎么知道對方是否已經查看
- 11XP系統怎么清除緩存？
- 12AMD推土機架構回顧：雖隕落卻是Zen成功的墊腳石
[摘要]本篇文章給大家帶來的內容是關于HTML中表格相關知識的介紹（代碼實例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。制作網頁時，要合理規劃網頁布局。比如，在網頁中添加一個表格，可分為上、中、下三部分，上部存放網頁標題或LOGO圖片，中間部分是整個網頁的主體內容，底部就是相關制作信...
本篇文章給大家帶來的內容是關于HTML中表格相關知識的介紹（代碼實例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。制作網頁時，要合理規劃網頁布局。比如，在網頁中添加一個表格，可分為上、中、下三部分，上部存放網頁標題或LOGO圖片，中間部分是整個網頁的主體內容，底部就是相關制作信息。此外，單元格里還可再添加單元格，將內容分類別、分層次合理規劃。
表格標簽--table
是一個雙標簽。一個表格中包含<table>、<tr>、<td>三個基本元素。首標簽<table>和尾標簽</table>表示一個表格的開始和結束。'tr=table row'用于表示一行的開始和結束,'td=table data'用來表示行中個單元格的開始和結束。
<table>
<tr>
<td>單元格內容</td>
<td>單元格內容</td>
</tr>
<tr>
<td>單元格內容</td>
<td>單元格內容</td>
</tr>
...
</table>表格的標題--caption
有一種特殊的單元格叫做標題單元格，位于表格的第一行，標題單元格是沒有邊框的，默認居中顯示。
<caption>表格的標題</caption>
表格邊框--border
默認情況下，表格不顯示邊框。為了更好的區分內容，可以設置表格邊框寬度大小，
<table border='邊框屬性'>
表格內文字與邊框的距離--cellpadding
默認情況下，文字緊貼邊框。通過cellpadding可以調整文字與邊框之間的距離
<table cellpadding='文字與邊框的距離'>
表格中單元格之間的距離--cellspacing
表格中單元格之間的距離也可以變化。
<table cellspacing='單元格之間的距離'>
單元格背景圖像--background
<table background='圖片'>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小白</title>
</head>
<body>
<p>默認情況下的表格</p>
<table border="2" align="center">
<caption>亞洲</caption>
<tr>
<td>中國</td>
<td>北京</td>
<td>1949年10月1日</td>
</tr>
<tr>
<td>緬甸</td>
<td>內比都</td>
<td>1948年1月4日</td>
</tr>
</table>
<hr/>
<p>設置屬性后的表格</p>
<!--bgcolor：行背景顏色-->
<table cellpadding="15" cellspacing="10" border="2" bgcolor="#8fbc8f" align="center">
<caption>亞洲</caption>
<tr>
<td>中國</td>
<td>北京</td>
<td>1949年10月1日</td>
</tr>
<tr>
<td>緬甸</td>
<td>內比都</td>
<td>1948年1月4日</td>
</tr>
</table>
</body>
</html>
行合并屬性--rowspan
在制作一些復雜的表格時，需要用到單元格合并
<td row='需要合并的行數'>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>單元格行合并</title>
</head>
<body>
<table border="1" align="center" width="600" height="300">
<caption>招生簡章</caption>
<tr>
<td rowspan="3">基礎科目</td>
<td>數學</td>
</tr>
<tr>
<td>外語</td>
</tr>
<tr>
<td>政治</td>
</tr>
<tr>
<td>專業課</td>
<td bgcolor="#bc8f8f">100</td>
</table>
</body>
</html>
列合并屬性--colspan
在制作一些復雜的表格時，需要用到單元格合并
<td row='需要合并的列數'>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>單元格列合并</title>
</head>
<body>
<table border="1" align="center" width="600" height="300" cellpadding="30">
<tr>
<td colspan="3" align="center">西安</td>
</tr>
<tr>
<td>長安區</td>
<td>雁塔區</td>
<td>碑林區</td>
</tr>
<tr>
<td>新城區</td>
<td>高新區</td>
<td>蓮湖區</td>
</tr>
</table>
</body>
</html>
表格的嵌套
一個表格內部包含其他標簽，用表格來排版頁面，可以使頁面各個部分互不沖突，整體結構優美。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格嵌套</title>
</head>
<body>
<table bgcolor="#8fbc8f" align="center">
<caption>示例</caption>
<tr>
<td>曇花</td>
<td>
<img src="flower_02.jpg" height="300" width="200">
</td>
<td>
<img src="flower_02.jpg" height="300" width="200">
</td>
</tr>
<tr>
<td>瀏覽器</td>
<td>
<a href="http://www.baidu.com" style="color: #f10180">百度</a>
</td>
<td bgcolor="#bc8f8f">
<table border="1">
<tr>
<td>百度貼吧</td>
<td>百度網盤</td>
<td>百度圖庫</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
以上就是本篇文章的全部內容，敢于HTML的相關知識大家可以參考PHP中文網的HTML開發手冊進行學習。
以上就是HTML中表格相關知識的介紹（代碼實例）的詳細內容，更多請關注php中文網其它相關文章！
網站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。
推薦資訊 總人氣榜
最新教程 本月人氣
- 1《楚喬傳》不提也罷彈幕是什么意思?不提也罷彈幕是什么梗?
- 2暴風影音傳片助手是什么?暴風影音傳片助手如何使用?_暴風影音_下載之家
- 3最新3組騰訊視頻vip賬號共享(2017.6.14)
- 4愛剪輯音頻聲音如何調節？
- 5愛剪輯如何循環音樂？愛剪輯循環音樂圖文說明教程
- 6愛剪輯備份視頻太慢如何辦？
- 7泰劇愛妻百度云全集
- 8免費8組愛奇藝會員賬號密碼分享（2017.6.9）
- 9愛剪輯視頻保存在什么地方？愛剪輯視頻保存位置說明
- 10愛剪輯無法備份視頻如何辦？
- 11xlplayer mac在什么地方一個位置 xlplayer mac如何刪除
- 12最新4組騰訊視頻vip賬號共享(2017.6.5)
- 1支付寶不能交水電費了嗎 支付寶為什么不能交水電費了
- 2人人車怎么收費 人人車收費規范
- 3華為pay與微信支付哪一個好 微信支付與huawei pay比較區別
- 4平板電腦wifi無線網絡設置圖文說明教程【圖文詳細說明】
- 5百度專車怎么收費 百度專車收費規范介紹
- 6微信怎么投訴微商賣家 微信怎么投訴才能讓對方封號
- 7ios9 bug隱藏無用應用方法
- 8獵豹瀏覽器搶票不受12306新版驗證碼影響
- 93星版iphone6s與臺積電版iphone6s續航哪一個好
- 10寧夏銀行手機銀行怎么開通 寧夏銀行手機銀行開通圖文說明教程
- 11酷狗怎么設置伴唱并錄音 酷狗伴唱設置圖文說明教程
- 12中興grand x max+怎么？中興grand x max+設置評測
相關文章
- HTML是什么？HTML頁面的容易設計方法說明
- 現在學習前端有前途嗎？前端工資待遇如何
- 前端好學嗎？零基礎html多久能學會？
- HTML中src與href的區別有哪一些？用法有何不同？
- html常用標簽及屬性有哪一些？新手如何使用HTML標簽
- utf-8如何轉gb2312？html編碼轉換方法說明
- 什么是HTML？一篇文章教你學會HTML
- 網站兼容性如何處理？兼容性處理的3種方式
- html中div br p3者有什么區別？
- div id class如何使用？div id class3者區別詳細說明
- html中長度如何表示？html中幾種經常見長度表示方法
- 當 position:sticky 遇到 bootstrap 浮動布局時候的踩坑記錄
