Detaillierte Einführung in grundlegende CSS-Stiltabellen

Dieser Artikel bietet hauptsächlich eine detaillierte Einführung in die grundlegende Stiltabelle von CSS. Interessierte Freunde können darauf verweisen.

a.Css-Tabellenattribute können uns dabei helfen, das Erscheinungsbild der Tabelle erheblich zu verbessern

b. Tabellenrand

<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>小王</td>
        <td>20</td>
        <td>男</td>
    </tr>
    <tr>
        <td>小王</td>
        <td>20</td>
        <td>男</td>
    </tr>
    <tr>
        <td>小王</td>
        <td>20</td>
        <td>男</td>
    </tr>
</table>

Dies kann eine Tabelle ohne Randeffekt erzeugen

Zu diesem Zeitpunkt können Sie einen Rand hinzufügen Tabelle

<table border = "1">

Aber diese Schreibweise kann nicht auf alle Tabellen angewendet werden

Sie können also den CSS-Stil als bessere Möglichkeit wählen

<table id="tb">
#tb{
    border: 1px solid blue;
}

Dieses Sie Sie können den blauen Außenrand der äußersten Ebene der Tabelle sehen.

Sie können die Innenseite der Tabelle festlegen:

#tb,tr,th,td{
    border: 1px solid blue;
}

Hier wird die Gruppenauswahl verwendet. Das heißt, ein ID-Selektor und drei Elementselektoren werden durch Kommas getrennt

c. Rahmen einklappen

In der Tabelle oben werden doppelte Ränder angezeigt

Das ist offensichtlich unzumutbar

Sie können die doppelten Ränder in einer Zeile zusammenfassen

#tb,tr,th,td{
    border: 1px solid blue;
    border-collapse: collapse;
}

d Tabellenbreite und -höhe

#tb{
    width: 400px;
    height: 400px;
    border-collapse: collapse;
}
#tb,tr,th,td{
    border: 1px solid blue;
}

Tabellentextausrichtung

#tb{
    width: 400px;
    height: 400px;
    border-collapse: collapse;
}
#tb,tr,th,td{
    border: 1px solid blue;
    text-align:center;
}

f. Tischpolsterung

g. Tischfarbe

#tb{
    width: 400px;
    height: 400px;
    border-collapse: collapse;
}
#tb,tr,th,td{
    border: 1px solid blue;
    text-align:center;
    background-color: aqua;
}

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in grundlegende CSS-Stiltabellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!