Nauka HTML Część 23: Używanie znaczników Col, Group i Caption w tabelach HTML
W poprzedniej dyskusji wyjaśniłem na temat wykorzystania elementów thead, tbody i tfoot do grupowania zawartości komórki w tabeli.
W tym zwilżeniu wyjaśnięo tym, jak używać znaczników <colgroup>, <col> i <caption>. Gdzie znaczniki <colorgroup> i <col> znajdują się w parze znaczników <table> ... </table> przed napisaniem znacznika <tr>.
W skrócie, dla <taggroup> jest używanygrupując kolumny w tabeli, znacznik <col> służy do wyświetlania kolumn w tabeli, a znacznik <caption> służy do zapisywania tytułu w tabeli. Aby uzyskać dodatkowe wyjaśnienie, spójrzmy na wyjaśnienie poniżej:
Tagi Col i Colgroup
Znacznik <colgroup> służy do wskazaniagrupa kolumn w tabeli, w której element <table> jest elementem nadrzędnym. Ten znacznik jest zwykle używany do stylizowania określonych określonych kolumn w tabeli jako całości. Nie musisz więc powtarzać tego samego stylu formatu w każdej komórce w tabeli.
W obrębie znacznika <colgroup> można także zapisywać znaczniki<col>, który pokazuje kolumny w tabeli. Ponadto ten znacznik <col> można zapisać więcej niż jeden, wskazując kolejność kolumn grupy colgroup. Znacznik <col> jest zapisywany wewnątrz elementu <table> za elementem <caption> i przed elementami <thead>, <tfoot>, <tbody> i <tr>.
Możesz użyć tagu <col>Różne właściwości stylu dla każdej kolumny w tabeli jako całości, więc nie trzeba już wielokrotnie powtarzać tego samego stylu dla każdej komórki w tabeli. Poniżej znajduje się przykład kodu do używania i pisania znacznika <colgroup> i znacznika <col> w HTML:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Col dan Colgroup</title>
</head>
<body>
<table border="1">
<colgroup>
<col style="background-color:pink; border:2px solid black;">
<col span="2" style="background-color:#00FFFF;">
</colgroup>
<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 uruchomieniu powyższego kodu HTML w przeglądarce pojawi się on tak, jak pokazano poniżej:
Tag podpisu
Słowo „podpis” oznacza dobry tytułtytuł strony, rozdział lub inny. Zasadniczo znacznik caption służy do dodawania nagłówka (tytułu) do tabeli, która zaczyna się od użycia elementu <table>. Element <caption> jest deklarowany za pomocą pary znaczników <caption> ... </caption>.
Znacznik <caption> jest zapisany w elemencie <table>bezpośrednio przed innymi elementami innymi słowy, znacznik <caption> znajduje się nad tabelą i jest domyślnie wyśrodkowany, ale można zmienić jego położenie za pomocą właściwości text-align w CSS w celu wyrównania tekstu oraz właściwości po stronie podpisu w celu ustawienia powyższego lub dolna część stołu.
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Caption di HTML</title>
<style type="text/css">
table,th, td{
border: 1px solid black;
border-collapse: collapse; }
table{ width: 30%; }
th, td{ text-align:center; }
.caption{ text-align: left; }
.caption1{ caption-side: bottom; }
</style>
</head>
<body>
<table>
<caption>Daftar Absensi Kelas X</caption>
<tr>
<th>Nama</th>
<th>NIM</th>
</tr>
<tr>
<td>Ridayanti</td>
<td>071401001</td>
</tr>
<tr>
<td>Ahmad Zulham</td>
<td>071401002</td>
</tr>
</table><br>
<table>
<caption class="caption">Daftar Absensi Kelas X</caption>
<tr>
<th>Nama</th>
<th>NIM</th>
</tr>
<tr>
<td>Ridayanti</td>
<td>071401001</td>
</tr>
<tr>
<td>Ahmad Zulham</td>
<td>071401002</td>
</tr>
</table><br>
<table>
<caption class="caption1">Daftar Absensi Kelas X</caption>
<tr>
<th>Nama</th>
<th>NIM</th>
</tr>
<tr>
<td>Ridayanti</td>
<td>071401001</td>
</tr>
<tr>
<td>Ahmad Zulham</td>
<td>071401002</td>
</tr>
</table>
</body>
</html>Po uruchomieniu powyższego kodu HTML w przeglądarce pojawi się on tak, jak pokazano poniżej:
Z powyższego obrazka podpis w pierwszej tabeliwyświetlane domyślnie. Podpis w drugiej tabeli jest wyświetlany z właściwością text-align: left, natomiast podpis w trzeciej tabeli jest wyświetlany z właściwością side-side: bottom.
