HTML tanulás 21. rész: A Bgcolor, a Szabályok és a Border Attribútumok használata a HTML táblázatokban

Korábban megvitattuk a colspan és a rowspan attribútumok használatáról a táblacellák HTML-ben történő kombinálására.

Ebben a vitában megvitatjuka bgcolor, a szabályok és a határ attribútumok használatáról. A bgcolor attribútumot arra használják, hogy az asztal vagy az asztal cellájának háttérszínét vonzóbbá tegyék.

Nem csak a bgcolor attribútumot, hanem más attribútumokat ismint például a szabályok és a határ jellemzők, szintén szerepet játszanak abban, hogy az asztalod vonzóbbá váljon. További részletek, nézzük meg az alábbi magyarázatot:

Bgcolor attribútum

A bgcolor attribútum a tábla háttér színének meghatározására szolgál. Ebben az attribútumban három érték van, nevezetesen:

érték	függvény
Szín neve	Megadja a táblázat háttér színét a színnévvel (például kék, piros)
Színes HEX kód	Megadja a tábla háttér színét HEX-kóddal (például # ff0000, # ff00ff)
Színes RGB kód	Megadja a táblázat háttérszínét az RGB-kóddal (például RGB (0,0,0), RGB (255,0,0))

Az alábbiakban bemutatunk egy példát az írási kódra és a bgcolor attribútum használatára HTML-ben:

<!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>

A fenti HTML-kód végrehajtása után a böngészőben az alábbiak szerint jelenik meg:

használja a bgcolor-t a html táblázatokban

Mivel a bgcolor attribútumot a HTML5 nem támogatja, a szerep helyébe a háttér szín tulajdonságát kell használni a CSS-ben. A szintaxis:

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

Az alábbiakban látható példák a CSS tulajdonságok megvalósítására:

<!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>

Amikor a böngészőben futtatja, készítse el így:

Szabályok attribútuma

A Rule attribútum segítségével beállíthatjuk a táblázat celláinak méretét. A szabály attribútumon belül számos érték létezik, nevezetesen:

érték	függvény
egyik sem	Nincsenek beállítások
csoportok	Vízszintes szabály az összes sor és oszlop között
sorok	Szabályozza a csoport összes vonalának méretét
cols	Az egész oszlop méretét függőlegesen ellenőrizze
minden	Irányítsd az összes sort és oszlopot

Az alábbiakban bemutatunk egy példát az írási kódra és a szabály attribútum használatára HTML formátumban:

<!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>

A fenti HTML-kód futtatása után a böngészőben az alábbiak szerint jelenik meg:

Border Attribútum

A border attribútum egy keret létrehozására szolgál egy táblázatban a keret vastagságának megadásával. Íme egy példa a kódírásra és a border attribútumok használatára HTML-ben:

<!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>

A fenti HTML-kód végrehajtása után a böngészőben az alábbiak szerint jelenik meg:

A HTML5 nem támogatja a border attribútumot, ezért a CSS-t használják. A példaírás ilyen:

<!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>

A fenti HTML-kód futtatása után a böngészőben az alábbiak szerint jelenik meg:

A fenti kódban található a border-collapse tulajdonság használata. Ezek a tulajdonságok, ha megadják az "összeomlás" értéket, a keretet egyetlen képkockavá alakítják, és a fenti képen fognak kinézni.

Ha jól érti a fenti három attribútumot, itt az ideje megtanulni thead, tbody és tfoot elemek használatát a HTML táblázatokban.

</ P>

Tovább: