Učíme sa HTML časť 21: Používanie atribútov Bgcolor, Rule a Border v tabuľkách HTML

Predtým sme diskutovali o použití atribútov colspan a rowspan na skombinovanie buniek tabuľky do HTML.

V tejto diskusii budeme diskutovaťo používaní atribútov bgcolor, rules a border. Použitie atribútu bgcolor sa používa na vytvorenie farby pozadia tabuľky alebo bunky tabuľky, aby vyzerala atraktívnejšie.

Nielen atribút bgcolor, ďalšie atribútynapríklad pravidlá a atribúty orámovania majú tiež rolu, aby vaša tabuľka vyzerala atraktívnejšie. Pre viac podrobností zvážme nižšie uvedené vysvetlenie:

Atribút Bgcolor

Atribút bgcolor sa používa na určenie farby pozadia tabuľky. V tomto atribúte sú tri hodnoty, a to:

hodnota	funkcie
Názov farby	Určuje farbu pozadia tabuľky s názvom farby (napríklad modrá, červená)
Farebný HEX kód	Určuje farbu pozadia tabuľky s HEX kódom (napríklad # ff0000, # ff00ff)
Farebný kód RGB	Určuje farbu pozadia tabuľky s kódom RGB (napríklad RGB (0,0,0), RGB (255,0,0))

Nasleduje príklad kódu na písanie a použitie atribútu bgcolor v HTML:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Bgcolor di HTML</title>
</head>
<body>
<table bgcolor=#ff00ff>
<tr>
<th>No</th>
<th>NIM</th>
<th>Nama</th>
</tr>
<tr>
<td>1</td>
<td>071401001</td>
<td>Ridayanti</td>
</tr>
<tr>
<td>2</td>
<td>071401002</td>
<td>Ahmad Zulham</td>
</tr>
</table>
</body>
</html>

Po vykonaní vyššie uvedeného kódu HTML v prehliadači sa zobrazí nasledujúci obrázok:

Pretože v jazyku HTML5 nie je atribút bgcolor podporovaný, rola sa v CSS nahradí použitím vlastnosti farba pozadia. Syntax je:

<table style="background-color: color_name|hex_number|rgb_number;">

Príklady použitia vlastností CSS nájdete nižšie:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Properti Background Color pada Tabe;</title>
</head>
<body>
<table style="background-color:yellow;">
<tr>
<th>No</th>
<th>NIM</th>
<th>Nama</th>
</tr>
<tr>
<td>1</td>
<td>071401001</td>
<td>Ridayanti</td>
</tr>
<tr>
<td>2</td>
<td>071401002</td>
<td>Ahmad Zulham</td>
</tr>
</table>
</body>
</html>

Keď ho spustíte v prehliadači, vytvorte ho takto:

Atribút pravidiel

Atribút rules sa používa na nastavenie veľkosti medzi bunkami v tabuľke. V atribúte pravidla existuje niekoľko hodnôt, a to:

hodnota	funkcie
nikto	Nie sú k dispozícii žiadne nastavenia
skupiny	Horizontálne pravidlá medzi všetkými riadkami a stĺpcami
riadky	Ovládajte veľkosť všetkých riadkov v skupine
cols	Vertikálne ovládajte veľkosť celého stĺpca
všetko	Ovládajte všetky riadky a stĺpce

Nasleduje príklad kódu na písanie a použitie atribútu rules v HTML:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Rules di HTML</title>
</head>
<body>
<table rules="rows">
<tr><td>Satu</td> <td>Dua</td> <td>Tiga</td></tr>
<tr><td>Empat</td> <td>Lima</td> <td>Enam</td></tr>
<tr><td>Tujuh</td> <td>Delapan</td> <td>Sembilan</td></tr>
</table><br>
<table rules="cols">
<tr><td>Satu</td> <td>Dua</td> <td>Tiga</td></tr>
<tr><td>Empat</td> <td>Lima</td> <td>Enam</td></tr>
<tr><td>Tujuh</td> <td>Delapan</td> <td>Sembilan</td></tr>
</table>
</body>
</html>

Po spustení vyššie uvedeného kódu HTML v prehliadači sa zobrazí nasledujúci obrázok:

Hraničný atribút

Atribút ohraničenia sa používa na vytvorenie rámca v tabuľke zadaním jeho hrúbky. Tu je príklad písania kódu a použitia atribútov ohraničenia v HTML:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Border di HTML</title>
</head>
<body>
<table border="4">
<tr>
<th>No</th>
<th>NIM</th>
<th>Nama </th>
</tr>
<tr>
<td>1</td>
<td>071401001</td>
<td>Ridayanti</td>
</tr>
<tr>
<td>2</td>
<td>071401002</td>
<td>Ahmad Zulham</td>
</tr>
<tr>
<td>3</td>
<td>071401003</td>
<td>Zulaikha</td>
</tr>
</table>
</body>
</html>

Po vykonaní vyššie uvedeného kódu HTML v prehliadači sa zobrazí nasledujúci obrázok:

Atribút ohraničenia nie je podporovaný HTML5, preto sa namiesto toho používa CSS. Príklad písania je nasledujúci:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Border di CSS pada Tabel</title>
<style type="text/css">
table,th, td {
border: 1px solid black;
border-collapse: collapse;
padding:10px;
text-align:center;
}
</style>
</head>
<body>
<table>
<tr>
<th>No</th>
<th>NIM</th>
<th>Nama</th>
</tr>
<tr>
<td>1</td>
<td>071401001</td>
<td>Ridayanti</td>
</tr>
<tr>
<td>2</td>
<td>071401002</td>
<td>Ahmad Zulham</td>
</tr>
</table>
</body>
</html>

Po spustení vyššie uvedeného kódu HTML v prehliadači sa zobrazí nasledujúci obrázok:

Vo vyššie uvedenom kóde sa používa vlastnosť border-collapse. Tieto vlastnosti, ak je daná hodnota „kolaps“, urobia z rámu jeden rám a budú vyzerať ako na obrázku vyššie.

Ak dobre rozumiete vyššie uvedeným trom atribútom, je čas naučiť sa používať prvky thead, tbody a tfoot v tabuľkách HTML.

</ P>

Prečítajte si viac: