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: