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

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


【定義和用法】

td標簽定義 HTML 表格中的標準數據單元格。

HTML 表格有兩種單元格:

標題單元格 - 包含標題信息(使用 th元素創建)

數據單元格 - 包含數據(使用 td元素創建)

默認情況下,td元素中的文本是普通的,并且左對齊。

th元素中的文本默認為粗體且居中。


【實例】

例子 1

一個簡單的 HTML 表格,有兩行和四個表格單元格:

<table>
  <tr>
    <td>單元格 A</td>
    <td>單元格 B</td>
  </tr>
  <tr>
    <td>單元格 C</td>
    <td>單元格 D</td>
  </tr></table>

例子 2

如何對齊 td中的內容(使用 CSS):

<table style="width:100%">
  <tr>
    <th>月份</th>
    <th>儲蓄</th>
  </tr>
  <tr>
    <td>一月</td>
    <td style="text-align:right">¥3400</td>
  </tr>
  <tr>
    <td>二月</td>
    <td style="text-align:right">¥4500</td>
  </tr></table>

例子 3

如何將背景顏色添加到表格單元格(使用 CSS):

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

例子 4

如何設置表格單元格的高度(使用 CSS):

<table>
  <tr>
    <th>月份</th>
    <th>儲蓄</th>
  </tr>
  <tr>
    <td style="height:100px">一月</td>
    <td style="height:100px">¥3400</td>
  </tr></table>

例子 5

如何在表格單元格中規定不換行(使用 CSS):

<table>
  <tr>
    <th>詩</th>
  </tr>
  <tr>
    <td style="white-space:nowrap">朝辭白帝彩云間,千里江陵一日還。兩岸猿聲啼不住,輕舟已過萬重山。</td>
  </tr></table>

例子 6

如何垂直對齊 td中的內容(使用 CSS):

<table style="width:50%;">
  <tr>
    <th>月份</th>
    <th>儲蓄</th>
  </tr>
  <tr style="height:100px">
    <td style="vertical-align:bottom">一月</td>
    <td style="vertical-align:bottom">¥3400</td>
  </tr></table>

例子 7

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

<table style="width:100%">
  <tr>
    <th>月份</th>
    <th>儲蓄</th>
  </tr>
  <tr>
    <td style="width:70%">一月</td>
    <td style="width:30%">¥3400</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>月份ly savings</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>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
    <td>186-2345-6789</td>
  </tr></table>

【屬性】

HTML的td標簽|html入門知識

【默認的 CSS 設置】

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

td {
  display: table-cell;
  vertical-align: inherit;}


友情鏈接: 知識付費 | EDU指南導航 | 貴州網站建設公司 |
Copyright?2011 Guangzhou Longtengfei Network Technology Co., Ltd. 廣州龍騰飛網絡科技有限公司 粵ICP備18029205號 XML地圖 | 系統開發專題地圖
主站蜘蛛池模板: 办公室啪啪激烈高潮动态图 | 青娱乐欧美视频| 国产麻豆成人传媒免费观看| 亚洲人成影院77777| 西西大胆午夜人体视频| 国产精品久久影院| 丰满熟妇乱又伦| 最近中文字幕在线mv视频7| 台湾无码一区二区| 一级黄色香蕉视频| 夜夜爱夜夜做夜夜爽| 一级做a爰性色毛片免费| 欧美成aⅴ人高清免费观看| 免费a级在线观看播放| 日本网址在线观看| 小猪视频免费观看视频下载| 亚洲一区二区精品视频| 精品国产Av一区二区三区| 国产精品久久久久久搜索| 99国产精品热久久久久久夜夜嗨| 日本插曲的痛的30分钟| 亚洲AV成人噜噜无码网站| 精品久久中文字幕| 国产欧美亚洲精品a第一页| 一卡二卡三卡在线| 新梅金瓶2之爱奴国语| 亚洲国产精品久久久久秋霞小 | 视频在线免费观看资源| 国产成人精品A视频一区| 金8国欧美系列在线| 很污很黄的网站| 亚洲AV日韩AV永久无码色欲| 欧美成人看片黄a免费看| 亚洲精品动漫在线| 超清高清欧美videos| 国产成人综合精品一区| a毛片免费视频| 日本一区二区三| 亚洲日韩中文字幕天堂不卡| 波多野结衣女教师6bd| 国产99久9在线视频|