HTML代碼教程
【HTML教程】HTML的table標簽|html入門知識
時間: 2025-03-28 22:33:24 瀏覽次數:9
常用的html標簽匯總、以及操作過程中的一些bug問題解決方法,以下龍騰飛網絡科技-小吳在建站實操中筆記記錄,一路走來,一步步學習、總結、整理的一些資料,不用死記硬背,保存使用非常方便,實操過程中遇到了就查詢搜索一下,實踐出真章,做多了自然就熟悉了:【定義和用法】table標簽定義了 HTML 表格。一個 HTML 表格由一

常用的html標簽匯總、以及操作過程中的一些bug問題解決方法,以下龍騰飛網絡科技-小吳在建站實操中筆記記錄,一路走來,一步步學習、總結、整理的一些資料,不用死記硬背,保存使用非常方便,實操過程中遇到了就查詢搜索一下,實踐出真章,做多了自然就熟悉了:


【定義和用法】

table標簽定義了 HTML 表格。

一個 HTML 表格由一個 table元素和一個或多個 tr、th和 td元素組成:

tr元素 定義表格行
th元素 定義表格標題
td元素 定義表格單元格

HTML 表格還可以包含以下元素:

caption、colgroup、thead、tfoot、tbody


【實例】

例子 1

一個簡單的 HTML 表格,包含兩列和兩行:

<table>
  <tr>
    <th>月份</th>
    <th>儲蓄</th>
  </tr>
  <tr>
    <td>一月</td>
    <td>¥3400</td>
  </tr></table>

例子 2

如何向表格添加折疊邊框(使用 CSS):

<html><head><style>table, th, td {
  border: 1px solid black;
  border-collapse: collapse;}</style></head><body><table>
  <tr>
    <th>月份</th>
    <th>儲蓄</th>
  </tr>
  <tr>
    <td>一月</td>
    <td>¥3400</td>
  </tr>
  <tr>
    <td>二月</td>
    <td>¥4500</td>
  </tr></table></body></html>

例子 3

如何右對齊表格(使用 CSS):

<table style="float:right">
  <tr>
    <th>月份</th>
    <th>儲蓄</th>
  </tr>
  <tr>
    <td>一月</td>
    <td>¥3400</td>
  </tr>
  <tr>
    <td>二月</td>
    <td>¥4500</td>
  </tr></table>

例子 4

如何居中對齊表格(使用 CSS):

<html><head><style>table, th, td {
  border: 1px solid black;}table.center {
  margin-left: auto;
  margin-right: auto;}</style></head><body><table class="center">
  <tr>
    <th>月份</th>
    <th>儲蓄</th>
  </tr>
  <tr>
    <td>一月</td>
    <td>¥3400</td>
  </tr>
  <tr>
    <td>二月</td>
    <td>¥4500</td>
  </tr></table>

例子 5

如何為表格添加背景顏色(使用 CSS):

<table style="background-color:#00FF00">
  <tr>
    <th>月份</th>
    <th>儲蓄</th>
  </tr>
  <tr>
    <td>一月</td>
    <td>¥3400</td>
  </tr>
  <tr>
    <td>二月</td>
    <td>¥4500</td>
  </tr></table>

例子 6

如何向表格添加內邊距(使用 CSS):

<html><head><style>table, th, td {
  border: 1px solid black;}th, td {
  padding: 10px;}</style></head><body><table>
  <tr>
    <th>月份</th>
    <th>儲蓄</th>
  </tr>
  <tr>
    <td>一月</td>
    <td>¥3400</td>
  </tr>
  <tr>
    <td>二月</td>
    <td>¥4500</td>
  </tr></table></body></html>

例子 7

如何設置表格寬度(使用 CSS):

<table style="width:400px">
  <tr>
    <th>月份</th>
    <th>儲蓄</th>
  </tr>
  <tr>
    <td>一月</td>
    <td>¥3400</td>
  </tr>
  <tr>
    <td>二月</td>
    <td>¥4500</td>
  </tr></table>

例子 8

如何創建表頭:

<table>
  <tr>
    <th>姓名</th>
    <th>電郵</th>
    <th>電話</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  </tr></table>

例子 9

如何創建帶標題的表格:

<table>
  <caption>每月儲蓄</caption>
  <tr>
    <th>月份</th>
    <th>儲蓄</th>
  </tr>
  <tr>
    <td>一月</td>
    <td>¥3400</td>
  </tr>
  <tr>
    <td>二月</td>
    <td>¥4500</td>
  </tr></table>

例子 10

如何定義跨越多行或多列的表格單元格:

<table>
  <tr>
    <th>姓名</th>
    <th>電郵</th>
    <th colspan="2">電話</th>
  </tr>
  <tr>
    <td>longtengfei</td>
    <td>longtengfei@www.alhakaek.com</td>
    <td>138-1234-5678</td>
    <td>186-2345-6789</td>
  </tr></table>

 

【默認的 CSS 設置】

大多數瀏覽器將使用以下默認值顯示 table元素:

table {
  display: table;
  border-collapse: separate;
  border-spacing: 2px;
  border-color: gray;}


友情鏈接: 知識付費 | EDU指南導航 | 貴州網站建設公司 |
Copyright?2011 Guangzhou Longtengfei Network Technology Co., Ltd. 廣州龍騰飛網絡科技有限公司 粵ICP備18029205號 XML地圖 | 系統開發專題地圖
主站蜘蛛池模板: 成人免费黄色网址| 每日更新在线观看av| 国产成人精品永久免费视频| 99v久久综合狠狠综合久久| 成人精品视频99在线观看免费| 乱人伦人妻中文字幕无码| 欧美超清videos1080p| 免费特黄一区二区三区视频一| 菠萝蜜国际通道麻豆三区| 国产日韩一区二区三区在线观看| 91香蕉视频成人| 天天拍天天干天天操| 一级黄色大片网站| 日本动漫黑暗圣经| 久爱免费观看在线网站| 欧美性视频18~19| 亚洲精品国产电影| 看一级毛片**直播在线| 四虎国产精品永久地址入口| 风间由美性色一区二区三区| 国产精品一区二区av| 91在线看片一区国产| 女人与公拘交酡过程高清视频| 中文字幕亚洲欧美专区| 日本高清免费看| 亚洲AV午夜成人片| 欧美人牲交a欧美精区日韩| 亚洲熟女WWW一区二区三区| 男人使劲躁爽女人动态图| 北条麻妃在线视频| 色噜噜狠狠狠狠色综合久一| 国产又黄又爽胸又大免费视频| 黄色香蕉视频网站| 国产精品亚洲成在人线| 6080一级毛片| 在线A级毛片无码免费真人| jizz在线播放| 好男人资源在线观看好| 中文乱码35页在线观看| 无码一区二区三区| 久久久久久久97|