css怎麼設定表格樣式？ css設定表格樣式的方法-css教學-PHP中文網

首頁

web前端

css教學

css怎麼設定表格樣式？ css設定表格樣式的方法

不言

Aug 18, 2018 pm 02:16 PM

css

一個簡單的表格有時會覺得很單調，那要怎麼為css表格加樣式呢？本篇文章就跟大家介紹關於css表格樣式的設定方法。

1、一個簡單的表格
table.html

<!doctype html><html><head>
    <meta charset="utf-8">
    <title>表格样式</title>
    <link href="box.css" type="text/css" rel="stylesheet"></head><body>
  <center>
  <table class="class">
      <caption>课程表</caption>
        <tr>
            <th>星期\课程</th>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
      </tr>
      <tr>
            <th>1-2节</th>
            <td>数学</td>
            <td>语文</td>
            <td>化学</td>
            <td>英语</td>
             <td>英语</td>
      </tr>

      <tr>
            <th>3-4节</th>
            <td>英语</td>
            <td>物理</td>
            <td>化学</td>
            <td>英语</td>
             <td>体育</td>
      </tr>

      <tr>
            <th>5-6节</th>
            <td>数学</td>
            <td>物理</td>
            <td>体育</td>
            <td>化学</td>
            <td>美术</td>
      </tr>

      <tr>
            <th>7-8节</th>
            <td>数学</td>
            <td>美术</td>
            <td>化学</td>
            <td>英语</td>
            <td>体育</td>
      </tr>
      <tr>
            <th>9-10节</th>
            <td>生物</td>
            <td>美术</td>
            <td>生物</td>
            <td>英语</td>
            <td>物理</td>
      </tr>
    </table>
  </center>
  </body></html>

table.css

table,td,th{
    border:1px solid #aaa;    
    font-size: 23px;
    }

2、邊框合併：boder-collapse
屬性值：
separate;（分開，預設）
collapse;（合併）

table.css

table,td,th{
    border:1px solid #aaa;    
    font-size: 23px;    
    border-collapse:collapse;
    }

3、邊框間距border-spacing(前提是：border-collapse:separate;)

table.css

table,td,th{
    border:1px solid #aaa;    
    font-size: 23px;    
    border-collapse:separate;    
    border-spacing: 45px;
    }

4、設定表格標題的位置caption- side
屬性值：
top;//預設
bottom;
left;
right;

table.css

table,td,th{
    border:1px solid #aaa;    
    font-size: 23px;    
    border-collapse:separate;    
    border-spacing: 45px;    
    caption-side:bottom;
    }

5、當單元格物件寬度超過單元格所定義的寬度時，可用table-layout：fixed保持表格寬度不被改變
屬性值：auto(預設)
fixed(寬度固定)
table.css

table,td,th{
    border:1px solid #aaa;
        font-size: 23px;    
        border-collapse:separate;    
        border-spacing: 5px;    
        table-layout: fixed;    
        caption-side:top;
        }

相關建議：

CSS控製表格樣式_html/css_WEB-ITnose

#精通CSS DIV網頁樣式與佈局設定表單和表格_html/css_WEB-ITnose

Css基本樣式表格的詳細介紹

以上是css怎麼設定表格樣式？ css設定表格樣式的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

Draggin＆＃039;和droppin＆＃039;在反應中Apr 17, 2025 am 11:52 AM

React生態系統為我們提供了許多庫，所有庫都集中在拖放的相互作用上。我們有反應，反應，可愛dnd，

快速軟件Apr 17, 2025 am 11:49 AM

最近有一些關於快速軟件的完美互連的事情。

帶有背景折疊的嵌套梯度Apr 17, 2025 am 11:47 AM

我可以說我經常使用背景折疊。 IT Wager IT幾乎從未在日常CSS工作中使用。但是在斯特凡·朱迪斯（Stefan Judis）的帖子中，我想起了它，

使用React Hooks使用requestAnimationFrameApr 17, 2025 am 11:46 AM

使用RequestAnimationFrame進行動畫化應該很容易，但是如果您還沒有徹底閱讀React的文檔，那麼您可能會遇到一些事情

需要滾動到頁面頂部嗎？Apr 17, 2025 am 11:45 AM

向用戶提供此鏈接的最簡單方法是針對元素上的ID的鏈接。如此...

最好的（GraphQl）API是您編寫的APIApr 17, 2025 am 11:36 AM

聽著，我不是GraphQL專家，但我確實喜歡與之合作。作為前端開發人員，它向我曝光數據的方式非常酷。它就像一個菜單

每周平台新聞：文本間距書籤，頂級等待，新放大器加載指示器Apr 17, 2025 am 11:26 AM

在本週的綜述中

在保留邊框半徑的同時，擴展盒子的各種方法Apr 17, 2025 am 11:19 AM

我最近注意到Codepen的一個有趣的更改：在懸停在主頁上的筆時，有一個矩形，圓角在後面擴展。

See all articles

熱AI工具

熱工具

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合，這些清單在安全評估過程中經常使用，而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表，幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上，他就可以存取所需的每種類型的清單。

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序，非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具，幫助Web開發人員更好地理解保護網路應用程式的過程，並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞，難度各不相同。請注意，該軟體中