How to set table style with css? How to set table style with css-CSS Tutorial-php.cn

How to set table style with css? How to set table style with css

不言

Release： 2018-08-18 14:16:10

Original

5560 people have browsed it

A simple table sometimes feels monotonous, so how do you add styles to a CSS table? This article will introduce to you how to set the CSS table style.

1. A simple table
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>

Copy after login

table.css

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

Copy after login

2. Border Merge: boder-collapse
Attribute value:
separate; (separate, default)
collapse; (merge)

table.css

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

Copy after login

3. Border-spacing (premise: border-collapse:separate;)

table.css

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

Copy after login

4. Set the position of the table title caption- side
Attribute value:
top;//Default
bottom;
left;
right;

table.css

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

Copy after login

5. When the width of the cell object exceeds the width defined by the cell, table-layout: fixed can be used to keep the table width unchanged
Attribute value: auto (default)
fixed (fixed width)
table.css

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

Copy after login

Related recommendations:

CSS control table style_html/css_WEB-ITnose

Proficient in CSS DIV web page style and layout settings forms and tables_html/css_WEB-ITnose

Detailed introduction to Css basic style tables

The above is the detailed content of How to set table style with css? How to set table style with css. For more information, please follow other related articles on the PHP Chinese website!