Læring af HTML-del 21: Brug af Bgcolor, regler og grænseegenskaber i HTML-tabeller

Tidligere diskuterede vi ved hjælp af attributterne colspan og rowspan til at flette tabelceller i HTML.

I denne diskussion vil vi diskutereom brug af bgcolor, regler og grænseegenskaber. Brug af bgcolor-attributten bruges til at give baggrundsfarven på bordet eller bordcellen for at gøre det mere attraktivt.

Ikke kun bgcolor-attributten, andre attributtersåsom regler og grænseegenskaber har også en rolle for at gøre din tabel mere attraktiv. For flere detaljer, lad os overveje forklaringen nedenfor:

Bgcolor-attribut

Bgcolor-attributten bruges til at specificere baggrundsfarven på tabellen. I denne attribut er der tre værdier, nemlig:

værdi	funktion
Farve navn	Specificerer baggrundsfarven på tabellen med farvenavnet (f.eks. Blå, rød)
Farve HEX-kode	Specificerer tabelbaggrundsfarve med HEX-kode (f.eks. # Ff0000, # ff00ff)
Farve RGB-kode	Specificerer baggrundsfarven på tabellen med RGB-koden (såsom RGB (0,0,0), RGB (255,0,0))

Følgende er et eksempel på skrivningskoden og brugen af bgcolor-attributten i 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>

Når HTML-koden ovenfor er udført i browseren, vises den som vist nedenfor:

Da egenskaben bgcolor ikke understøttes i HTML5, erstattes rollen med brug af egenskaben baggrundsfarve i CSS. Syntaks er:

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

Eksempler på anvendelse af CSS-egenskaber, som du kan se nedenfor:

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

Når du kører det i browseren, skal du fremstille det sådan:

Regler attribut

Regelattributten bruges til at indstille størrelsen mellem celler i en tabel. Inden for attributten regler er der flere værdier, nemlig:

værdi	funktion
none	Der er ingen indstillinger
grupper	Horisontal regel mellem alle rækker og kolonner
rækker	Kontroller størrelsen på alle linjer i gruppen
cols	Kontroller størrelsen på hele søjlen lodret
alle	Kontroller alle rækker og kolonner

Følgende er et eksempel på skrivningskoden og brug af reglerattributten i 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>

Når HTML-koden ovenfor er kørt i browseren, vises den som vist nedenfor:

Grænseegenskab

Kantattributten bruges til at oprette en ramme i en tabel ved at specificere rammens tykkelse. Her er et eksempel på skrivning af kode og brug af kantattributter i 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>

Når HTML-koden ovenfor er udført i browseren, vises den som vist nedenfor:

Kantattributten understøttes ikke af HTML5, så CSS bruges i stedet. Eksempelskrivningen er sådan:

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

Når HTML-koden ovenfor er kørt i browseren, vises den som vist nedenfor:

I koden ovenfor er der brug af egenskaben grænse-sammenbrud. Disse egenskaber, hvis værdien "kollaps" får rammen til en enkelt ramme og vil ligne billedet ovenfor.

Hvis du har en god forståelse af de tre attributter ovenfor, er det på tide, at du lærer brugen af elementer, tbody og tfoot i HTML-tabeller.

</ P>

Læs mere: