[Johdatus HTML:ään] Oppitunti 10 – Taulukko eli taulukko tag

Sitten taulukon sisältöalue tarvitsee tarkempia tietoja Esimerkiksi opiskelijanumero on 001, nimi on Zhang San, aine on matematiikka ja pisteet 80. Jos muita aineita ei ole, kokonaispistemäärä. on 80. Jos on muita aiheita Mitä tulee aiheisiin, laske ne yhteen, eikö niin?

Nämä sisällöt sijoitetaan taulukon sisältöalueelle, mikä vaatii tbody-tunnisteen.

1.3 Rivit ja sarakkeet

Taulukot jaetaan riveihin ja sarakkeisiin, jotka leikataan sarakkeiksi ja sarakkeiksi. Leikkauksen jälkeen jokaisesta palasta tulee solu, pieni neliö ja pieni neliö.

Lisäksi huomio:Rivit sisältävät sarakkeita, tämä tulee muistaa。

Rivin otsikon nimi on tr 。

Otsikon solutunniste on th , taulukon runko-osan solutunniste ontd 。

2 Hieman harjoittelua

2.1 Tee yksinkertainen transkriptio


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>语文成绩</th>
                    <th>数学成绩</th>
                    <th>HTML成绩</th>
                    <th>总成绩</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>张三</td>
                    <td>80</td>
                    <td>90</td>
                    <td>96</td>
                    <td>266</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>李四</td>
                    <td>71</td>
                    <td>80</td>
                    <td>100</td>
                    <td>251</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

2.2 Lisää reunaviivat

Tämä näyttö on hieman sotkuinen, joten reunaviivojen lisääminen tekee pöydästä paremman.Voit lisätä yhdenborder="1" Katso attribuuttiasetukset alla olevasta koodista ja päivitä sitten verkkosivu nähdäksesi, näyttääkö se paljon paremmalta.


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <table border="1">
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>语文成绩</th>
                    <th>数学成绩</th>
                    <th>HTML成绩</th>
                    <th>总成绩</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>张三</td>
                    <td>80</td>
                    <td>90</td>
                    <td>96</td>
                    <td>266</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>李四</td>
                    <td>71</td>
                    <td>80</td>
                    <td>100</td>
                    <td>251</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

2.3 Ristirivi

Tietenkin voimme myös luoda ristikkäisen näytön. Esimerkiksi Zhang San ja Li Si ovat luokasta 1, laittaa ne samalle riville, ja sitten luokan 1 opiskelijat vievät 2 riviä.

Lisää sitten luokka 2, jossa on Wang Wu ja Zhao Liu, ja anna heidän olla isossa rivissä, jotta luokassa 2 on kaksi pientä riviä.

Mitä tässä pitää asettaa riviväli Attribuutit.


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <table border="1">
            <thead>
                <tr>
                    <th>学号</th>
                    <th>班级</th>
                    <th>姓名</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td rowspan="2">1班</td>
                    <td>张三</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>李四</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td rowspan="2">2班</td>
                    <td>王五</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>赵六</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

Yllä olevaa koodia tarkasteltaessa asetimme td-solulle rowspan-attribuutin, jolloin se on myös luokan 1 toinen solu, joten samaa td-koodia ei tarvitse lisätä.

2.4 Pylväiden ylittäminen

Ristisarake viittaa useisiin sarakkeisiin, joilla on samat ominaisuudet, joten yhden sarakkeen tietojen näyttäminen riittää. Aivan kuten rivien ylittämisessä juuri nyt, tarkoituksena ei ole se, että sekä Zhang San että Li Si ovat luokkaa 1, joten tarpeettomien näyttöjen välttämiseksi, koska niillä kaikilla on samat tietoattribuutit, ne ovat molemmat luokkaa 1, joten näyttö luokka 1, ylitä rivi tarpeeksi.

Sarakkeiden ylittäminen tarkoittaa useiden sarakkeiden yhdistämistä yhteen. Otetaan esimerkki.


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <table border="1">
            <thead>
                <tr>
                    <th>学号</th>
                    <th>班级</th>
                    <th>姓名</th>
                    <th>成绩</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td rowspan="2">1班</td>
                    <td>张三</td>
                    <td>90</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>李四</td>
                    <td>80</td>
                </tr>
                <tr>
                    <td colspan="4">1班总人数：2，总成绩：170</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td rowspan="2">2班</td>
                    <td>王五</td>
                    <td>70</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>赵六</td>
                    <td>100</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>冯七</td>
                    <td>75</td>
                </tr>
                <tr>
                    <td colspan="4">2班总人数：3，总成绩：245</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

Haha, yllä oleva koodi,Itse asiassa en voi saada tämän kuvakaappauksen vaikutusta., jos saat koodin ja huomaat, että siinä on ongelma, muistaKerro minullevai niin.

Teknologian jakaminen

[Johdatus HTML:ään] Oppitunti 10 - Taulukko eli taulukkotunniste

1 Taulukossa joitain alatunnisteita

1.1 Otsikkoalue

1.2 Taulukon sisältöalue