首頁  >  文章  >  web前端  >  css怎麼設定表格樣式? css設定表格樣式的方法

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

不言
不言原創
2018-08-18 14:16:105504瀏覽

一個簡單的表格有時會覺得很單調,那要怎麼為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

相關文章

看更多