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ę.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
<!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> |