整合營銷服務商

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

          免費咨詢熱線:

          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 文本域—富文本編輯器


          主站蜘蛛池模板: 国产一区二区三区在线观看免费| 一区二区在线电影| 狠狠色综合一区二区| 一区二区三区杨幂在线观看| 无码国产精品一区二区免费虚拟VR| 任你躁国产自任一区二区三区| 亚洲一区二区三区在线观看精品中文 | 尤物精品视频一区二区三区| 国产精品区一区二区三在线播放| 国产一国产一区秋霞在线观看| 国产观看精品一区二区三区| 在线电影一区二区三区| A国产一区二区免费入口| 无码人妻精品一区二区三区99仓本 | 日韩欧美一区二区三区免费观看 | 变态拳头交视频一区二区| 无码人妻精品一区二区| 天天躁日日躁狠狠躁一区| 一区二区三区国产| 国产精品香蕉在线一区| 亚洲男人的天堂一区二区| 亚洲av无码片区一区二区三区| 国产一区二区三区不卡在线看 | 国产一区二区福利| 国产精品久久亚洲一区二区| 亚洲韩国精品无码一区二区三区| 亚洲av无码成人影院一区| 奇米精品一区二区三区在| 无码少妇一区二区三区芒果| 伊人久久精品无码av一区| 国产精品日韩一区二区三区| 秋霞午夜一区二区| 日本一区二区三区中文字幕| 亚洲国产韩国一区二区| 中文字幕在线无码一区| 精品一区中文字幕| 久久久久久人妻一区二区三区| 久久精品亚洲一区二区| 国产激情一区二区三区| 国产精品第一区揄拍无码| 日本视频一区在线观看免费|