Pengenalan terperinci tentang cara menyediakan jadual dalam HTML

Dalam reka bentuk web, jadual ialah kaedah reka letak biasa yang boleh digunakan untuk menyusun dan memaparkan data. Dalam HTML, jadual ditakrifkan dan disediakan melalui teg. Berikut akan memperkenalkan secara terperinci cara menyediakan jadual dalam HTML.

1. Cipta jadual

Dalam HTML, jadual ditakrifkan oleh teg <table>. Jadual ringkas boleh dibuat melalui kod berikut:

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>

Dalam kod di atas, teg <table> digunakan untuk mentakrifkan jadual, teg <tr> digunakan untuk menentukan baris bagi jadual, dan Label <td> untuk menentukan sel jadual. Antaranya, <td> mewakili kandungan sel dan setiap teg <td> mewakili sel.

2. Tetapkan jidar jadual

Dalam HTML, anda boleh menukar rupa jadual dengan menetapkan jidar jadual. Anda boleh menukar saiz jidar jadual dengan menetapkan atribut <table> teg border. Kodnya adalah seperti berikut:

<table border="1">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>

Dalam kod di atas, atribut border ditetapkan kepada 1, yang bermaksud saiz sempadan jadual ialah 1 piksel.

3. Tetapkan lebar dan penjajaran jadual

Anda boleh menukar lebar jadual dengan menetapkan atribut <table> teg width. Kodnya adalah seperti berikut:

<table border="1" width="50%">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>

Dalam kod di atas, atribut width ditetapkan kepada 50%, yang bermaksud bahawa lebar jadual menduduki 50% daripada elemen induk.

Anda boleh menukar penjajaran jadual dengan menetapkan atribut <table> teg align. Kodnya adalah seperti berikut:

<table border="1" width="50%" align="center">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>

Dalam kod di atas, atribut align ditetapkan kepada center, yang bermaksud jadual dijajarkan secara mendatar dan di tengah.

4. Tetapkan warna latar belakang dan warna fon jadual

Anda boleh menukar warna latar belakang jadual dengan menetapkan atribut <table> teg bgcolor. Kodnya adalah seperti berikut:

<table border="1" width="50%" align="center" bgcolor="#E6E6FA">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>

Dalam kod di atas, atribut bgcolor ditetapkan kepada #E6E6FA, menunjukkan bahawa warna latar belakang jadual ialah lavender.

Anda boleh menukar warna fon dengan menetapkan atribut <td> teg color. Kodnya adalah seperti berikut:

<table border="1" width="50%" align="center" bgcolor="#E6E6FA">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>

Dalam kod di atas, atribut <td> bagi teg color ditetapkan kepada red, menunjukkan bahawa warna fon berwarna merah.

Ringkasan

Dalam reka bentuk web, jadual ialah kaedah reka letak biasa yang boleh digunakan untuk menyusun dan memaparkan data. Dalam HTML, jadual ditakrifkan dan disediakan melalui teg. Artikel ini memperkenalkan kaedah menetapkan jadual dalam HTML daripada aspek mencipta jadual, menetapkan sempadan, lebar dan penjajaran jadual, menetapkan warna latar belakang dan warna fon jadual, dsb. Saya harap ia dapat membantu pembaca lebih memahami cara menggunakan jadual HTML.

Atas ialah kandungan terperinci Pengenalan terperinci tentang cara menyediakan jadual dalam HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!