1. Tworzenie tabeli
Używamy znacznika <table>.
Wiersze tworzymy za pomocą znacznika <tr>, a kolumny - <th>.
2. Scalanie komórek tabeli
Scalanie w poziomie - atrybut colspan.
Scalanie w pionie - atrybut rowspan.
3. Dzielenie scalonej komórki tabeli
Zadanie 1. Na nowej stronie stwórz tabelę zawierającą znaki specjalne i symbole. Ustaw dla tabeli: szerokość, różne kolory tła dla wierszy nieparzystych i parzystych, obramowanie, odstępy pomiędzy komórkami, wyrównanie tekstu w komórkach, nagłówek o zdefiniowanym kolorze tła i czcionce oraz stopkę.
<!DOCTYPE html>
<html>
<head>
<title>Ćwiczenie 6.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
table {
border: 1px solid gray;
text-align: center;
}
.trparzysty {
background-color: #dddddd;
}
.trnieparzysty {
background-color: #e6e6e6;
}
.kod {
font-family: "Courier New";
}
.znaczenie {
font-style: italic;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
thead {
background-color: #9c9c9c;
color: #ffffff;
}
tfoot {
background-color: #9c9c9c;
color: #ffffff;
}
</style>
</head>
<body>
<table align='center' width='60%' cellspacing='0'>
<thead>
<tr>
<th rowspan='2'>Symbol</th>
<th colspan='2'>Tworzenie w HTML</th>
<th rowspan='2'>Znaczenie</th>
</tr>
<tr>
<th>Sposób 1</th>
<th>Sposób 2</th>
</tr>
</thead>
<tbody>
<tr class='trnieparzysty'>
<td>∀</td>
<td class='kod'>&forall;</td>
<td class='kod'>&#8704;</td>
<td class='znaczenie'>Dla każdego elementu</td>
</tr>
<tr class='trparzysty'>
<td>∈</td>
<td class='kod'>&isin;</td>
<td class='kod'>&#8712;</td>
<td class='znaczenie'>Należy do</td>
</tr>
<tr class='trnieparzysty'>
<td>∉</td>
<td class='kod'>&notin;</td>
<td class='kod'>&#8713;</td>
<td class='znaczenie'>Nie należy do</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan='4' class='znaczenie'>Koniec.</td>
</tr>
</tfoot>
</table>
</body>
</html>