Maison  >  Article  >  interface Web  >  Comment définir le style du tableau avec CSS ? Comment définir le style du tableau avec CSS

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

不言
不言original
2018-08-18 14:16:105509parcourir

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>

table.css

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

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;
    }

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;
    }

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;
    }

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;
        }

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn