Comment définir le style du tableau avec CSS ? Comment définir le style du tableau avec CSS-tutoriel CSS-php.cn

Comment définir le style du tableau avec CSS ? Comment définir le style du tableau avec CSS

不言

Libérer： 2018-08-18 14:16:10

original

5551 Les gens l'ont consulté

Un tableau simple semble parfois monotone, alors comment ajouter des styles à un tableau CSS ? Cet article vous présentera comment définir le style du tableau CSS.

1. Un tableau simple
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>

Copier après la connexion

table.css

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

Copier après la connexion

2. Fusion des bordures : boder-collapse
Valeur de l'attribut :
separate; (séparé, par défaut)
collapse;

table.css

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

Copier après la connexion

3. Espacement des bordures (prémisse : border-collapse:separate;)

table.css

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

Copier après la connexion

4, définissez la position du titre du tableau côté légende
valeur de l'attribut :
haut ;//Par défaut
en bas
à gauche ;
right;

table.css

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

Copier après la connexion

5. Lorsque la largeur de l'objet cellule dépasse la largeur définie par la cellule, vous pouvez utiliser table-layout:fixed pour conserver la largeur du tableau n'est pas affectée. Modifiez la valeur de l'attribut
: auto (par défaut)
. fixe (largeur fixe)
table.css

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

Copier après la connexion

Recommandations associées :

Table de contrôle CSS style_html/css_WEB-ITnose

Maîtrise du style de page Web CSS+DIV et des paramètres de mise en page des formulaires et des tables_html/css_WEB-ITnose

Introduction détaillée aux tables de style de base CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!