Utwórz plik css-tables.html z podstawową strukturą strony WWW w standardzie HTML5.
<!DOCTYPE html> <html> <head> <title>Formatowanie tabel</title> <meta charset="utf-8"/> <style> </style> </head> <body> </body> </html>
W elemencie style dodaj kod:
#tabela1 caption { caption-side: bottom; }
W elemencie body dodaj kod.
<table id="tabela1" border="1"> <caption>Etykieta</caption> <tr><td>A1</td><td>B1</td></tr> <tr><td>A2</td><td>B2</td></tr> <tr><td></td><td></td></tr> </table>
Zapisz zmiany i odśwież podgląd.
W elemencie style dodaj kod:
#tabela1 { border-collapse: collapse; }
Zapisz zmiany i odśwież podgląd.
W elemencie style dodaj kod:
#tabela1 { border-collapse: separate; border-spacing: 3px; }
Zapisz zmiany i odśwież podgląd.
W elemencie style dodaj kod:
table { empty-cells: hide; }
Zapisz zmiany i odśwież podgląd.
W elemencie style dodaj kod:
empty-cells: hide; table-layout: fixed; }
Zapisz zmiany i odśwież podgląd.
W elemencie style dodaj kod.
td { vertical-align: middle; }
Zapisz zmiany i odśwież podgląd.
{caption-side:}
– definiuje położenie tytułu tabeli. Wartości stylu mogą być równe: top – nad tabelą, bottom – pod tabelą. W CSS2 dostępne były wartości: left - po lewej i right - po prawej, które mają być częścią standardu CSS3;{border-collapse:}
– definiuje odstęp między komórkami. Wartości stylu mogą być równe: collapse – komórki połączone, separate – komórki z odstępem;{border-spacing:}
– definiuje wartość odstępu między komórkami. Wartość stylu jest liczba lub liczby z
jednostką.{empty-cells:}
– definiuje sposób wyświetlania pustych komórek. Wartości stylu mogą być równe: hide - ukryte, show - widoczne{table-layout:}
– definiuje układ tabeli. Wartości stylu mogą być równe: fixed - stały układ, auto - automatyczny{vertical-align:}
– definiuje wyrównywanie zawartości komórki w pionie. Wartości stylu mogą być równe: baseline - do linii bazowej, top - do górnej krawędzi, bottom - do dolnej krawędzi, middle - do środka.W elemencie body dodaj kod.
<div id="tabela"> <div id="etykieta">Etykieta tabeli anonimowej</div> <div id="naglowek"> <div class="wiersz"> <span class="komorka">Komórka nagłówka tabeli</span> <span class="komorka">Komórka nagłówka tabeli</span> </div> </div> <div id="dane"> <div class="wiersz"> <span class="komorka">Komórka tabeli</span> <span class="komorka">Komórka tabeli</span> </div> <div class="wiersz"> <span class="komorka">Komórka tabeli</span> <span class="komorka">Komórka tabeli</span> </div> </div> </div>
W elemencie style dodaj kod:
#tabela { display: table; } #etykieta { display: table-caption; } .wiersz { display: table-row; } .komorka { display: table-cell; border: 1px solid silver; padding: 10px; } #dane { display: table-row-group; border: 2px solid red; } #naglowek { display: table-header-group ; background: green; }
Zapisz zmiany i odśwież podgląd.
Umieść plik css-tables.html na serwerze po sprawdzeniu poprawności.
Zastosuj poznane wiadomości w swojej witrynie.
{display:}
– definiuje właściwości elementu. Wartości stylu mogą być równe: