Tabele

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&nbsp;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>&#8704;</td>
			<td class='kod'>&amp;forall;</td>
			<td class='kod'>&amp;#8704;</td>
			<td class='znaczenie'>Dla każdego elementu</td>
		</tr>
		<tr class='trparzysty'>
			<td>&isin;</td>
			<td class='kod'>&amp;isin;</td>
			<td class='kod'>&amp;#8712;</td>
			<td class='znaczenie'>Należy do</td>
		</tr>
		<tr class='trnieparzysty'>
			<td>&notin;</td>
			<td class='kod'>&amp;notin;</td>
			<td class='kod'>&amp;#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>

 

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Witryna wykorzystuje Akismet, aby ograniczyć spam. Dowiedz się więcej jak przetwarzane są dane komentarzy.