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@m.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地圖 | 系統開發專題地圖
主站蜘蛛池模板: 国产成人久久一区二区三区| 性欧美videos高清喷水| 亚洲日本在线电影| 笨蛋英子未删1至925下载| 国产人与禽zoz0性伦| 亚洲五月六月丁香激情| 在人间免费观看未删减| 一区二区三区中文字幕| 成年美女黄网站色大免费视频 | 欧美大片一区二区| 亚洲自国产拍揄拍| 精品久久久久久| 国产一区在线观看视频| 黄色网站小视频| 国产男女爽爽爽免费视频| 88av视频在线| 在线观看免费国产视频| wwwfuqercom| 性色av免费观看| 中文字幕日韩精品无码内射| 日韩一区二区在线免费观看| 亚洲av无码一区二区三区不卡| 欧美日韩免费大片| 亚洲精品视频免费在线观看| 窝窝午夜看片国产精品人体宴| 四虎影视成人精品| 菠萝蜜国际通道麻豆三区| 国产女人aaa级久久久级| 欧美视频第二页| 国产精品一区二区在线观看| 6080新视觉| 国产高清精品入口91| aaaaa级少妇高潮大片| 女人双腿搬开让男人桶| 一本久久a久久精品亚洲| 成人国产一区二区三区| 中文字幕三级电影| 扁豆传媒在线入口| 中文字幕日韩有码| 日日碰狠狠添天天爽五月婷| 久久人人爽人人爽人人片av高请|