HTML中表格的實(shí)例應(yīng)用

lt;table> 表格的樣式：

表格 <table>標(biāo)簽的定義：

HTML 表格：<table> 標(biāo)簽定義。

簡單的 HTML 表格包括： table 元素，一個(gè)或多個(gè) tr、th 以及 td 元素。

<table>表格結(jié)構(gòu)：

<table border=1px;>
 <tr> <th> row1,col1 </th><th>row1,col2 </th> </tr>
 <tr> <th> row2,col1 </th><td>row2,col2 </td> </tr>
</table>

<table>表格元素：

tr（行標(biāo)簽）、 th（表頭單元格標(biāo)簽）、 td（普通單元格標(biāo)簽) caption（表格標(biāo)題）、 col(定義列)、 colgroup(對表格中的列進(jìn)行組合)、thead（組合表頭的內(nèi)容） tbody(組合表格的主題內(nèi)容) 、tfoot(組合表格的腳注內(nèi)容) 等

<td>（普通單元格標(biāo)簽) ：元素定義表格單元格

	<td>11,980</td>

<th>（表頭單元格標(biāo)簽）：元素定義表格表頭

<th scope="row">工資</th>

<tr>（行標(biāo)簽）：元素定義表格行

<tr>
		<th scope="row">工資</th>
		<td>11,980</td>
		<td>12,650</td>
		<td>9,700</td>
		<td>10,600</td>
 <td rowspan="5">工作</td>
	</tr>

<caption>(表格標(biāo)題）：元素定義表格標(biāo)題

<caption class="c1">月度收入4月 - 7月 </caption>

還有一些復(fù)雜的表格才能用到的元素 ：<col>、 <colgroup>、<thead>、 <tbody> 、<tfoot>等.

thead主要用來存放表格的表頭的;
tbody 用來存放真正的數(shù)據(jù)的;
tfoot是表格的腳部, 主要是用來對表格做總結(jié)性的統(tǒng)計(jì), 備注等.

由于thead, tbody, tfoot是從語義上來劃分表格結(jié)構(gòu)的, 主要用于比較復(fù)雜的表格中。

<colspan>合并行元素：定義<table>中的行的合并

 <td colspan="5">153,629</td>

<rowspan>合并列元素：定義<table>中的列的合并

 <td rowspan="5">工作</td>

<table>表格的嵌套:

<tr>
		<th scope="row">總計(jì)</th>
		<td>36,060</td>
		<td>38,759</td>
		<td>38,110</td>
		<td>40,700</td>
 <td class="ct">
 <table id="t2"> 
 <tr><td></td></tr>
 </table>
 </td>
	</tr>

嵌套

HTML基礎(chǔ)表格的應(yīng)用，上面的簡單元素就可以滿足，運(yùn)用表格邏輯思維去思考，可以更快的掌握<table>表格標(biāo)簽。

本文部分圖片來自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系修改。

數(shù)據(jù)密集型文檔和網(wǎng)頁中，復(fù)雜表格結(jié)構(gòu)是必不可少的。它們幫助用戶理解大量的信息和數(shù)據(jù)關(guān)系。本文將詳細(xì)介紹復(fù)雜表格的設(shè)計(jì)要點(diǎn)，提供實(shí)用的例子，并展示如何使用HTML代碼來創(chuàng)建這些表格。

復(fù)雜表格的設(shè)計(jì)要點(diǎn)

1. 清晰的層次結(jié)構(gòu)

復(fù)雜表格應(yīng)該有明確的層次結(jié)構(gòu)，以便用戶可以輕松地從總體到細(xì)節(jié)地閱讀信息。這通常通過使用標(biāo)題行和列來實(shí)現(xiàn)。

2. 一致的對齊

數(shù)據(jù)應(yīng)該根據(jù)其類型進(jìn)行對齊，例如，數(shù)字通常右對齊以便于比較，而文本則左對齊。

3. 合理的分隔

使用邊框和底色來區(qū)分不同的行和列，以增強(qiáng)可讀性。

4. 簡潔的標(biāo)注

對于包含復(fù)雜數(shù)據(jù)的表格，應(yīng)該提供清晰的標(biāo)注和腳注，以便用戶理解數(shù)據(jù)的來源和含義。

表格實(shí)例與HTML代碼

實(shí)例 1: 帶有合并單元格的表格

這個(gè)表格顯示了一個(gè)團(tuán)隊(duì)成員在上半年和下半年的表現(xiàn)評估。

<table border="1">
  <thead>
    <tr>
      <th rowspan="2">成員</th>
      <th colspan="2">上半年</th>
      <th colspan="2">下半年</th>
    </tr>
    <tr>
      <th>項(xiàng)目1</th>
      <th>項(xiàng)目2</th>
      <th>項(xiàng)目1</th>
      <th>項(xiàng)目2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>良好</td>
      <td>優(yōu)秀</td>
      <td>優(yōu)秀</td>
      <td>良好</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>合格</td>
      <td>良好</td>
      <td>良好</td>
      <td>優(yōu)秀</td>
    </tr>
  </tbody>
</table>

實(shí)例 2: 帶有子標(biāo)題的復(fù)雜表格

這個(gè)表格顯示了一個(gè)公司季度財(cái)務(wù)報(bào)告的簡化版本。

<table border="1">
  <thead>
    <tr>
      <th></th>
      <th>Q1</th>
      <th></th>
      <th>Q2</th>
      <th></th>
      <th>Q3</th>
      <th></th>
      <th>Q4</th>
      <th></th>
    </tr>
    <tr>
      <th>財(cái)務(wù)報(bào)告</th>
      <th>收入</th>
      <th>支出</th>
      <th>收入</th>
      <th>支出</th>
      <th>收入</th>
      <th>支出</th>
      <th>收入</th>
      <th>支出</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2020年</td>
      <td>50</td>
      <td>30</td>
      <td>70</td>
      <td>40</td>
      <td>60</td>
      <td>50</td>
      <td>80</td>
      <td>60</td>
    </tr>
    <tr>
      <td>2021年</td>
      <td>55</td>
      <td>35</td>
      <td>75</td>
      <td>45</td>
      <td>65</td>
      <td>55</td>
      <td>85</td>
      <td>65</td>
    </tr>
  </tbody>
</table>

實(shí)例 3: 具有行跨度的表格

這個(gè)表格展示了不同設(shè)備對于特定功能的支持程度。

<table border="1">
  <thead>
    <tr>
      <th>功能</th>
      <th>支持的設(shè)備</th>
      <th>兼容性</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="3">視頻播放</td>
      <td>手機(jī)</td>
      <td>高</td>
    </tr>
    <tr>
      <td>平板</td>
      <td>高</td>
    </tr>
    <tr>
      <td>電腦</td>
      <td>中</td>
    </tr>
    <tr>
      <td rowspan="2">音頻播放</td>
      <td>手機(jī)</td>
      <td>高</td>
    </tr>
    <tr>
      <td>智能音箱</td>
      <td>高</td>
    </tr>
    <tr>
      <td rowspan="2">文檔編輯</td>
      <td>電腦</td>
      <td>高</td>
    </tr>
    <tr>
      <td>平板</td>
      <td>中</td>
    </tr>
  </tbody>
</table>

最佳實(shí)踐

簡化設(shè)計(jì)：避免使用過多的裝飾性元素，如陰影或漸變。
數(shù)據(jù)可比性：確保相似性質(zhì)的數(shù)據(jù)在表格中是可比較的。
注釋和說明：在表格下方提供必要的注釋和數(shù)據(jù)來源說明。
測試：在不同的設(shè)備和屏幕尺寸上測試表格的顯示效果。

復(fù)雜表格結(jié)構(gòu)是展示和理解多維數(shù)據(jù)的強(qiáng)大工具。通過遵循上述設(shè)計(jì)原則和實(shí)例，你可以創(chuàng)建清晰、有效的表格來提高你的數(shù)據(jù)呈現(xiàn)能力。

SS 表格屬性可以幫助您極大地改善表格的外觀。

表格邊框

指定CSS表格邊框，使用border屬性。

下面的例子指定了一個(gè)表格的Th和TD元素的紅色邊框：

table,th,td｛border: 1px solid red;}

（1）編輯代碼

打開記事本，在<body>標(biāo)簽中加入以下代碼，并保存為HTML格式文件。代碼如下。

（2)在瀏覽器中瀏覽效果

在瀏覽器中瀏覽效果如圖所示。

請注意，上例中的表格具有雙線條邊框。這是由于 table、th 以及 td 元素都有獨(dú)立的邊框。

如果需要把表格顯示為單線條邊框，請使用 border-collapse 屬性。

折疊邊框

border-collapse 屬性設(shè)置表格的邊框是否被折疊成一個(gè)單一的邊框或隔開：

table{border-collapse: collapse;}

table,td,th{border: 1px solid red;}