整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          HTML之CSS表格<一>

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

          表格邊框

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

          下面的例子指定了一個表格的Th和TD元素的紅色邊框:

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

          (1)編輯代碼

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


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

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



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

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

          折疊邊框

          border-collapse 屬性設置表格的邊框是否被折疊成一個單一的邊框或隔開:

          table{border-collapse: collapse;}

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


          (1)編輯代碼

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


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

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


          Table 屬性

          數據密集型文檔和網頁中,復雜表格結構是必不可少的。它們幫助用戶理解大量的信息和數據關系。本文將詳細介紹復雜表格的設計要點,提供實用的例子,并展示如何使用HTML代碼來創建這些表格。

          復雜表格的設計要點

          1. 清晰的層次結構

          復雜表格應該有明確的層次結構,以便用戶可以輕松地從總體到細節地閱讀信息。這通常通過使用標題行和列來實現。

          2. 一致的對齊

          數據應該根據其類型進行對齊,例如,數字通常右對齊以便于比較,而文本則左對齊。

          3. 合理的分隔

          使用邊框和底色來區分不同的行和列,以增強可讀性。

          4. 簡潔的標注

          對于包含復雜數據的表格,應該提供清晰的標注和腳注,以便用戶理解數據的來源和含義。

          表格實例與HTML代碼

          實例 1: 帶有合并單元格的表格

          這個表格顯示了一個團隊成員在上半年和下半年的表現評估。

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

          實例 2: 帶有子標題的復雜表格

          這個表格顯示了一個公司季度財務報告的簡化版本。

          <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>財務報告</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>
          

          實例 3: 具有行跨度的表格

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

          <table border="1">
            <thead>
              <tr>
                <th>功能</th>
                <th>支持的設備</th>
                <th>兼容性</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td rowspan="3">視頻播放</td>
                <td>手機</td>
                <td>高</td>
              </tr>
              <tr>
                <td>平板</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>
              <tr>
                <td rowspan="2">文檔編輯</td>
                <td>電腦</td>
                <td>高</td>
              </tr>
              <tr>
                <td>平板</td>
                <td>中</td>
              </tr>
            </tbody>
          </table>
          

          最佳實踐

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

          復雜表格結構是展示和理解多維數據的強大工具。通過遵循上述設計原則和實例,你可以創建清晰、有效的表格來提高你的數據呈現能力。

          .表格的制作

          1、表格元素–<table>

          表格中的行–<tr>

          表格中的列–<td>

          表格中的表頭–【居中/加粗】

          table標記的邊框–border

          table標記的寬度–width

          table標記的高度–height

          table標記的水平對齊方式–align

          table標記的表格背景色–bgcolor

          table標記的表格邊框色–bordercolor

          table標記的表格中的內容與邊框之間的距離–cellpadding

          table標記的表格中的邊框與邊框之間的距離–cellspacing【默認是1px】

          tr標記的align屬性–設置當前行的水平對齊方式

          tr標記的bgcolor屬性–設置當前行的背景色

          tr標記的valign屬性–設置當前行的垂直對齊方式【top/middle/bottom】

          td標記的align屬性–設置當前列的水平對齊方式

          td標記的bgcolor屬性–設置當前列的背景色

          td標記的valign屬性–設置當前列的垂直對齊方式【top/middle/bottom】

          合并單元格

          水平方向合并單元格–跨列—colspan

          • 垂直方向合并單元格–跨行—rowspan
          • 刪除多余的單元格*

          以下是計算器的控制面板代碼

          <!DOCTYPE html>

          <html>

          <head>

          <meta charset="utf-8">

          <title>計算器的控制面板</title>

          </head>

          <body>

          <table border="1" cellspacing="10px" cellpadding="20px"

          align="center" bgcolor="aliceblue">

          <tr><td colspan="5" height="40px" align="right"><font size="7"><b>0</b></font></td></tr>

          <tr align="center">

          <td>MC</td>

          <td>MR</td>

          <td>MS</td>

          <td>M+</td>

          <td>M-</td>

          </tr>

          <tr align="center">

          <td>&lt;-</td>

          <td>CE</td>

          <td>C</td>

          <td>+/-</td>

          <td>√</td>

          </tr>

          <tr align="center">

          <td>7</td>

          <td>8</td>

          <td>9</td>

          <td>/</td>

          <td>%</td>

          </tr>

          <tr align="center">

          <td>4</td>

          <td>5</td>

          <td>6</td>

          <td>*</td>

          <td>1/x</td>

          </tr>

          <tr align="center">

          <td>1</td>

          <td>2</td>

          <td>3</td>

          <td>-</td>

          <td rowspan="2" bgcolor="yellow">=

          </td>

          </tr>

          <tr align="center">

          <td colspan="2">0</td>

          <td>.</td>

          <td>+</td>

          </tr>

          </table>

          </body>

          </html>

          看成品:

          2. 列表元素

          2.1 有序列表

          ol—有序列表

          li—列表中的每一項【條目】

          默認的標志是有順序的數字

          我們可以通過ol的type屬性來修改標志

          1–有順序的數字

          a–有順序的小寫字母

          A–有順序的大寫字母

          i–有順序的小寫羅馬數字

          I–有順序的大寫羅馬數字

          start屬性設置書順序的開始值

          2.2 無序列表

          ul—無序列表

          li—列表中的每一項【條目】

          默認的標志是實心點

          我們可以通過ul的type屬性來修改標志

          circle–圓形【。】

          disc----實心點[默認]

          square–正方形

          none–沒有標志

          2.3 自定義列表

          dl—自定義列表

          dt—自定義列表的頭

          dd—子項目

          以下是有序,無序,和自定義列表

          <!DOCTYPE html>

          <html>

          <head>

          <meta charset="utf-8">

          <title>列表</title>

          </head>

          <body>

          <ul type="none">

          <li>無序列表</li>

          <li>無序列表</li>

          <li>無序列表</li>

          </ul>

          <ol type="A">

          <li>有序列表</li>

          <li>有序列表</li>

          <li>有序列表</li>

          </ol>

          <dl>

          <dt>自定義列表</dt>

          <dt>自定義列表</dt>

          <dt>自定義列表</dt>

          </dl>

          </body>

          </html>

          3. 表單<form>

          主要負責采集信息的,可以將采集的信息提交。

          form的屬性

          action—指定表單數據的后端處理程序

          method----指定表單數據的提交方式【get[默認]/post】

          get提交數據會將被處理的數據跟隨在請求地址之后

          被提交的數據255個字符

          https://www.baidu.com/s?&wd=html

          post提交數據會將被處理的數據封裝到http協議的頭

          https://www.baidu.com/s

          被提交的數據沒有限制

          通常情況下提交文件只能用post

          enctype屬性規定在將表單數據發送到服務器之前如何對其進行編碼。

          <!DOCTYPE html>

          <html>

          <head>

          <meta charset="utf-8">

          <title></title>

          </head>

          <body>

          <table border="1" align="center" cellpadding="20px" cellspacing="0">

          <tr>

          <td>application/x-www-form-urlencoded</td>

          <td>在發送前對所有字符進行編碼(默認)。</td>

          </tr>

          <tr>

          <td>multipart/form-data</td>

          <td>不對字符編碼。當使用有文件上傳控件的表單時,該值是必需的。

          </td>

          </tr>

          <tr>

          <td>text/plain</td>

          <td>將空格轉換為 "+" 符號,但不編碼特殊字符。</td>

          </tr>

          </table>

          </body>

          </html>

          表單元素

          input 文本框/密碼框/單選按鈕/復選框…

          seletc 下拉列表

          textarea 文本域—富文本編輯器


          主站蜘蛛池模板: 亚洲av无码一区二区三区天堂古代| 色视频综合无码一区二区三区 | 国语精品一区二区三区| 一区二区三区精品视频| 久久免费精品一区二区| 精品3d动漫视频一区在线观看| 在线免费一区二区| 日韩一区精品视频一区二区| 亚洲AV无码第一区二区三区| 丰满人妻一区二区三区视频53| 青娱乐国产官网极品一区| 中文精品一区二区三区四区| 精品欧洲av无码一区二区三区| 一区二区三区免费在线视频 | 亚洲AV无一区二区三区久久| 亚洲Aⅴ无码一区二区二三区软件| 乱码人妻一区二区三区| 无码人妻一区二区三区免费 | 中文字幕一区在线观看| 丰满岳乱妇一区二区三区| 三级韩国一区久久二区综合| 国产精品一区二区av不卡| 亚洲Aⅴ无码一区二区二三区软件| 成人无码精品一区二区三区| 无码夜色一区二区三区| 国偷自产视频一区二区久| 波多野结衣一区二区三区高清在线| 日韩精品国产一区| 成人在线一区二区| 国模无码人体一区二区| 伊人精品视频一区二区三区| 国产午夜精品一区二区三区漫画 | 国产91大片精品一区在线观看 | 国产在线aaa片一区二区99| 中文字幕日韩一区二区三区不| 国产成人一区二区三区视频免费| 亚洲狠狠狠一区二区三区| 欧美日本精品一区二区三区| 精品乱人伦一区二区| 久久精品免费一区二区三区| 色噜噜狠狠一区二区|