Wykład 2 Tabele i ramki
1. Tabele
1.1. Podstawy budowy tabel na stronach WWW
Rys.1. Przykład prostej tabeli zawierającej kalendarz na miesiąc marzec
<table>...</table> definiuje tabelę
Atrybuty: border =
""– obramowanie tabeli, przy podanej wartości np.
border =
"5"ramka jest trójwymiarowa
<caption>...</caption> opcjonalny podpis tabeli
<th >...</th>– znacznik komórki zawierającej nagłówek tabeli
<tr>...</tr> – znacznik wierszy, które mogą zawierać nagłówki lub dane
<td>...</td> – znacznik komórki zawierającej dane tabeli
<!-- Pierwsza tabela-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title> Pierwsza tabela</title>
</head>
<body>
<table border="">
<caption><b>Miesiąc:</b>MARZEC
</caption>
<tr>
<th>tydzień</th> <th>poniedziałek</th> <th>wtorek</th> <th>środa</th>
<th>czwartek</th> <th>piątek</th> <th>sobota</th> <th>niedziela</th>
</tr>
<tr>
<th>9</th> <td></td> <td></td> <td></td> <td></td> <td></td>
<td>1</td> <td><b>2</b></td>
</tr>
<tr>
<th>10</th> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td>
<td>8</td> <td><b>9</b></td>
</tr>
<tr>
<th>11</th> <td>10</td> <td>11</td> <td>12</td> <td>13</td>
<td>14</td> <td>15</td> <td><b>16</b></td>
</tr>
<tr>
<th>12</th> <td>17</td> <td>18</td> <td>19</td> <td>20</td>
<td>21</td> <td>22</td> <td><b>23</b></td>
</tr>
<tr>
<th>13</th> <td>24</td> <td>25</td> <td>26</td> <td>27</td>
<td>28</td> <td>29</td> <td><b>30</b></td>
</tr>
<tr>
<th>14</th> <td>31</td> <td></td> <td></td> <td></td> <td></td>
<td></td> <td></td>
</tr>
</table>
</body>
1.2. Otaczanie tabeli tekstem, wyrównanie tabel
Atrybut align zastosowany do znacznika <table> pozwala wyrównać tabelę względem marginesów lewego i prawego (left, right) i otaczać ją tekstem (rys. 3 i 4).
Rys.3. Przykład prostej tabeli (rys.1) otoczonej tekstem z prawej strony
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title> Pierwsza tabela</title>
</head>
<body>
<table align="left" border="">
<caption><b>Miesiąc:</b>MARZEC</caption>
<tr>
<th>tydzień</th> <th>poniedziałek</th> <th>wtorek</th> <th>środa</th>
<th>czwartek</th> <th>piątek</th> <th>sobota</th> <th>niedziela</th>
</tr>
<tr>
<th>9</th> <td></td> <td></td> <td></td> <td></td>
<td></td> <td>1</td> <td><b>2</b></td>
</tr>
<tr>
<th>10</th> <td>3</td> <td>4</td> <td>5</td> <td>6</td>
<td>7</td><td>8</td><td><b>9</b></td>
</tr>
<tr>
<th>11</th> <td>10</td> <td>11</td> <td>12</td><td>13</td>
<td>14</td><td>15</td><td><b>16</b></td>
</tr>
<tr>
<th>12</th> <td>17</td> <td>18</td> <td>19</td> <td>20</td>
<td>21</td> <td>22</td> <td><b>23</b></td>
</tr>
<tr>
<th>13</th> <td>24</td> <td>25</td> <td>26</td> <td>27</td>
<td>28</td> <td>29</td> <td><b>30</b></td>
</tr>
<tr>
<th>14</th> <td>31</td> <td></td> <td></td> <td></td> <td></td>
<td></td> <td></td>
</tr>
</table>
<h1 align="center"> Otaczanie tabeli tekstem </h1>
<p> Domyślnie tabela wyrównywana jest do lewej strony, a tekst umieszczany jest nad nią i pod nią. Atrybut align umożliwia wyrównanie tabel względem dowolnego marginesu i otaczanie ich tekstem np. align="left" powoduje wyrównanie tabeli względem lewego marginesu, a towarzyszący jej tekst jest umieszczany między prawą krawędzią strony a tabeli (L.Lemay:HTML4).
</p>
</body>
</html>
Rys.4. Przykład pliku b1.html definiującego tabelę z rys.3
1.3. Wyrównanie zawartości komórki
Zastosowanie atrybutu align o wartościach: left, right, center oraz valign o wartościach: top, middle, bottom do znaczników <td>, <tr> lub <th> pozwala dowolnie wyrównać zawartość komórek. Ustawienia te dominują nad domyślnymi (patrz rys.1).
Rys.5. Przykład tabeli z wyrównaną zawartością komórek z danymi, wklejanie obrazu z pliku typu gif za pomocą znacznika <img> z atrybutem src i alt
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title> Trzecia tabela</title>
</head>
<body>
<table align="left" border="4">
<caption><b>Miesiąc: </b>MARZEC
</caption>
<tr>
<th>tydzień</th> <th>poniedziałek</th> <th>wtorek</th> <th>środa</th>
<th>czwartek</th> <th>piątek</th> <th>sobota</th> <th>niedziela</th>
</tr>
<tr>
<th>9</th> <td></td> <td></td> <td></td> <td></td> <td></td>
<td>1</td> <td><b>2</b></td>
</tr>
<tr>
<th>10</th> <td align="center" valign="middle">
<img src="kwiatek.gif" alt="urodziny"/>3</td>
<td>4</td> <td>5</td> <td>6</td> <td>7</td><td>8</td>
<td><b>9</b></td>
</tr>
<tr align="center">
<th align="left">11</th> <td>10</td> <td>11</td> <td>12</td>
<td>13</td> <td>14</td> <td>15</td> <td><b>16</b></td>
</tr>
<tr>
<th>12</th> <td>17</td> <td>18</td> <td>19</td> <td>20</td>
<td>21</td> <td>22</td> <td><b>23</b></td>
</tr>
<tr>
<th>13</th> <td>24</td> <td>25</td> <td>26</td> <td>27</td>
<td>28</td> <td>29</td> <td><b>30</b></td>
</tr>
<tr>
<th>14</th> <td>31</td> <td></td> <td></td> <td></td> <td></td>
<td></td> <td></td>
</tr>
</table>
<h1 align="center"> Otaczanie tabeli tekstem </h1>
<p> Domyślnie tabela wyrównywana jest do lewej strony, a tekst umieszczany jest nad nią i pod nią. Atrybut align umożliwia wyrównanie tabel względem dowolnego marginesu i otaczanie ich tekstem np. align="left" powoduje wyrównanie tabeli względem lewego marginesu, a towarzyszący jej tekst jest umieszczany między prawą krawędzią strony a tabeli (L.Lemay:HTML4).
</p>
</body>
</html>
Rys.6. Przykład pliku b2.html definiującego tabelę z rys.5
1.4. Dodawanie połączeń do stron WWW w tabelach
Zastosowanie znacznika <a> z atrybutem href, którego wartością jest adres URL nowej strony WWW- pozwala wstawić połączenie do tej strony. W przykładzie do wskazania połączenia wykorzystano obraz wklejony do dokumentu za pomocą znacznika <img> z atrybutem src.
Rys.7. Przykład tabeli z wyrównaną zawartością komórek z danymi, dodanie połączenia do strony WWW, wskazywanego za pomocą wklejonego obrazu
...do tego miejsca jak w p.1.3 rys.6 <tr>
<th>10</th>
<td align="center" valign="middle">
<a href="a.html"><img src="kwiatek.gif" alt="urodziny"/></a>
3 </td>
<td>4</td> <td>5</td> <td>6</td> <td>7</td>
<td>8</td> <td><b>9</b></td>
</tr>
………….od tego miejsca jak w p. 1.3 rys.6
Rys.8. Przykład pliku b3.html definiującego tabelę z rys.7
1.5. Tabele – rozpinanie komórek nad kilkoma wierszami i kolumnami
Rys.9. Przykład tabeli z rozpinaniem komórek
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title> Tabela z komórkami rozpiętymi</title>
</head>
<body>
<table align="center" border="4" width="90%"> <!--tabela zajmuje 90% szerokości strony-->
<caption align="bottom"><b>Opis kursu: Programowanie obiektowe</b>
</caption> <!--podpis tabeli umieszczony pod tabelą -->
<tr>
<th>Kod kursu INE9824</th><th colspan="5">Programowanie obiektowe</th>
</tr> <!--druga komórka w wierszu jest rozpięta na 5 kolumnach-->
<tr>
<th>Autor przedmiotu</th> <td colspan="5">dr inż. Zofia Kruczkiewicz</td>
</tr>
<tr> <!--pierwsza komórka w wierszu jest rozpięta na 2 wierszach-->
<th rowspan="2">Wymiar godzin<br/> semestralnie</th> <th>Wykład</th>
<th>Ćwiczenia</th> <th>Laboratorium</th> <th>Projekt</th>
<th width="12%">Seminarium</th> <!--6 komórka zajmuje 12% szerokości tabeli-->
</tr>
<tr> <!--zostało tylko 5 kolumn, gdyż w poprzednim wierszu pierwsza komórka jest rozpięta dwóch wierszach -->
<td>20</td> <td>0</td> <td>20</td> <td>0</td> <td>0</td>
</tr>
<tr> <!--pierwsza komórka w wierszu jest rozpięta na 2 wierszach-->
<th rowspan="2">Wymagania wstępne</th>
<!--druga komórka w wierszu jest rozpięta na 4 kolumnach-->
<td colspan="4">Algorytmy i struktury danych</td> <td>INE9817</td>
</tr>
<tr> <!--pierwsza komórka w wierszu jest rozpięta na 4 kolumnach-->
<td colspan="4">Podstawy informatyki</td> <td>-</td>
</tr>
<tr>
<th>Opis kursu</th> <!--druga komórka w wierszu jest rozpięta na 5 kolumnach-->
<td colspan="5">Przedmiot obejmuje obiektowe podejście do tworzenia oprogramowania. </td>
</tr>
<tr> <!--pierwsza komórka w wierszu jest rozpięta na 6 kolumnach czyli na całym wierszu-->
<th colspan="6">Zawartość tematyczna wykładu</th>
</tr>
<tr> <!--pierwsza komórka w wierszu jest rozpięta na 5 kolumnach, druga komórka zajmuje jedną kolumnę-->
<th colspan="5">Temat</th> <th>Liczba godzin</th>
/tr>
<tr> <!--pierwsza komórka w wierszu jest rozpięta na 5 kolumnach, druga komórka zajmuje jedną kolumnę-->
<td colspan="5">Cechy podejścia obiektowego w tworzeniu oprogramowania</td><td>1</td>
</tr>
<tr> <!--pierwsza komórka w wierszu jest rozpięta na 5 kolumnach, druga komórka zajmuje jedną kolumnę-->
<td colspan="5">Pojęcie klasy i obiektu, deklarowania składowych,
hermetyzacja, klasy i funkcje zaprzyjaźnione</td> <td>2</td>
</tr>
<tr> <!--pierwsza komórka w wierszu jest rozpięta na 5 kolumnach, druga komórka zajmuje jedną kolumnę-->
<td colspan="5">Rola konstruktorów i destruktorów, klasy zagnieżdżone</td>
<td>2</td>
</tr>
<tr> <!--pierwsza komórka w wierszu jest rozpięta na 5 kolumnach, druga komórka zajmuje jedną kolumnę-->
<td colspan="5">Efektywne elementy programowania: przeciążanie operator? i metod, statyczne składowe klas</td> <td>3</td>
</tr>
<tr> <!--pierwsza komórka w wierszu jest rozpięta na 5 kolumnach, druga komórka zajmuje jedną kolumnę-->
<td colspan="5">Tworzenie programów przez rozwój: rola dziedziczenia
jednobazowego i wielobazowego, składowe chronione, pokrywanie metod</td>
<td>4</td>
</tr>
<tr> <!--pierwsza komórka w wierszu jest rozpięta na 5 kolumnach, druga komórka zajmuje jedną kolumnę-->
<td colspan="5">Polimorfizm, abstrakcja klas i funkcji</td><td>2</td>
</tr>
<tr> <!--pierwsza komórka w wierszu jest rozpięta na 5 kolumnach, druga komórka zajmuje jedną kolumnę-->
<td colspan="5">Obiekty dynamiczne: kolekcje i rekurencyjne struktury danych</td><td>2</td>
</tr>
<tr> <!--pierwsza komórka w wierszu jest rozpięta na 5 kolumnach, druga komórka zajmuje jedną kolumnę-->
<td colspan="5">Tworzenie uniwersalnych elementów programów
wielokrotnego użycia za pomocą szablonów klas i funkcji </td> <td>2</td>
</tr>
<tr> <!--pierwsza komórka w wierszu jest rozpięta na 5 kolumnach, druga komórka zajmuje jedną kolumnę-->
<td colspan="5">Strumienie wejścia/wyjścia</td><td>2</td>
</tr>
</table>
</body>
</html>
Rys.10. Kod xhtml tabeli z rys.9.
2. Ramki
2.1. Podstawy budowy ramek
Rys. 11. Zastosowanie 3 ramek do budowy strony WWW-podział poziomy
Rys.12. Zastosowanie 3 ramek do budowy strony WWW (w trzeciej ramce
wywołano nową stronę WWW)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title> Pierwsze ramki</title>
</head>
<frameset rows="*,*,*">
<frame src="b1.html"></frame>
<frame src="b2.html"></frame>
<frame src="b3.html"></frame>
</frameset>
</html>
Rys. 13. Przykład pliku r1.html definiującego ramki z rys. 11 i 12- brak znaczników ciała dokumentu
Rys.14.
Zastosowanie 3 ramek do budowy strony WWW -podział pionowy<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title> Pierwsze ramki</title>
</head>
<frameset cols="*,*,*">
<frame src="b1.html"></frame>
<frame src="b2.html"></frame>
<frame src="b3.html"></frame>
</frameset>
Rys.16. Zastosowanie 3 ramek do budowy strony WWW -zagnieżdżanie znaczników
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title> Pierwsze ramki</title>
</head>
<frameset rows="200,*">
<frameset cols="200,*">
<frame src="b1.html"></frame>
<frame src="b2.html"></frame>
</frameset>
<frame src="b3.html"></frame>
</frameset>
</html>
Rys. 17. Przykład pliku r3.html definiującego ramki zagnieżdżone w wierszu na
rys. 16
2.2. Ramki lokalne
Ramki lokalne są wstawiane do dokumentu (w zasięgu znaczników ciała dokumentu <body>). Służy do tego celu znacznik <iframe>. Parametry ramki lokalnej są określane atrybutami tego znacznika: width, height, src itd.
Rys.18. Ramki lokalne dołączone do strony WWW
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title> Ramki lokalne</title>
</head>
<body>
<p>Przykład ramki lokalnej zwanej ramki pływającej:</p>
<iframe src="a.html" width="500" height="300" frameborder="1">
Brak obsługi ramek pływajacych.
</iframe>
</body>
2.3. Ramki – zmiana obramowań (atrybut frameborder=”0” lub =”1”), tworzenie połączeń miedzy ramkami i dokumentami. Zastosowanie atrybutów: (name) id i target
Rys.20. Ramki (<frameset rows="200,*">),
Rys.21. Wywołanie w ustalonej ramce („Druga”) nowej strony
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title> Pierwsze ramki</title>
</head>
<frameset rows="200,*">
<frameset cols="200,*">
<frame src="b1.html"></frame>
<frame frameborder="0" src="b2.html" name="Druga" id="Druga" ></frame>
</frameset>
<frame src="b3_1.html"></frame>
</frameset>
</html>
Rys.22. Zdefiniowanie nazwy ramki o atrybutach name=”Druga”
id="Druga"w pliku r3_1.html (rys.20)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title> Czwarta tabela</title>
</head>
<body>
<table align="left" border="4">
<caption><b>Miesiąc: </b>MARZEC
</caption>
<tr>
<th>tydzień</th> <th>poniedziałek</th> <th>wtorek</th> <th>środa</th>
<th>czwartek</th> <th>piątek</th> <th>sobota</th> <th>niedziela</th>
</tr>
<tr>
<th>9</th> <td></td> <td></td> <td></td> <td></td> <td></td>
<td>1</td> <td><b>2</b></td>
</tr>
<tr>
<th>10</th> <td align="center" valign="middle">
<a href="a.html" target="Druga">
<img src="kwiatek.gif" alt="urodziny"/></a> 3</td>
<td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td><b>9</b></td>
</tr>
<tr align="center">
<th align="left">11</th> <td>10</td> <td>11</td> <td>12</td> <td>13</td>
<td>14</td><td>15</td> <td><b>16</b></td>
</tr>
<tr>
<th>12</th><td>17</td><td>18</td><td>19</td> <td>20</td> <td>21</td>
<td>22</td> <td><b>23</b></td>
</tr>
<tr>
<th>13</th><td>24</td><td>25</td><td>26</td> <td>27</td> <td>28</td>
<td>29</td> <td><b>30</b></td>
</tr>
<tr>
<th>14</th> <td>31</td> <td></td> <td></td> <td></td> <td></td>
<td></td> <td></td>
</tr>
</table>
<h1 align="center"> Otaczanie tabeli tekstem </h1>
<p> Domyślnie tabela wyrównywana jest do lewej strony, a tekst umieszczany jest nad nią i pod nią. Atrybut align umożliwia wyrównanie tabel względem dowolnego marginesu i otaczanie ich tekstem np. align="left" powoduje wyrównanie tabeli względem lewego marginesu, a towarzyszący jej tekst jest umieszczany między prawą krawędzią strony a tabeli (L.Lemay:HTML4). </p>
</body>
</html>
Rys.23. Realizacja połączeń za pomocą atrybutów name=”Druga ”
id="Druga"wybranej ramki oraz atrybutu target=”Druga” w znaczniku <a> do wyświetlania
pobranych stron w pliku b3_1.html
2.4. Zastosowanie znacznika <base>
Wyświetlanie w ramce o atrybutach name="Druga" id="Druga" (rys.20, 21) strony (np. a.html) wywołanej z pliku b2_.html, w którym wystąpił w sekcji nagłówka (<head> </head>) znacznik <base target
="Druga"> i znacznik <a> wskazujący stronę (np. a.html) do wyświetlenia.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title> Pierwsze ramki</title>
</head>
<frameset rows="200,*">
<frameset cols="200,*">
<frame src="b1.html"></frame>
<frame frameborder="1" src="b2.html" name="Druga" id="Druga" ></frame>
</frameset>
<frame src="b2_.html"></frame>
</frameset>
</html>
Rys.24. Kod html pliku r3_2.html z ramkami, nadanie nazwy jednej z ramek o atrybutach name=”Druga” id="Druga" (podobnie jak na rys.20)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title> Czwarta tabela</title>
<base target="Druga"></base>
</head>
<body>
<table align="left" border="4">
<caption><b>Miesiąc: </b>MARZEC </caption>
<tr>
<th>tydzień</th><th>poniedziałek</th><th>wtorek</th><th>środa</th>
<th>czwartek</th><th>piątek</th><th>sobota</th><th>niedziela</th>
</tr>
<tr>
<th>9</th> <td></td> <td></td> <td></td> <td></td> <td></td>
<td>1</td> <td><b>2</b></td>
</tr>
<tr>
<th>10</th> <td align="center" valign="middle">
<a href="a.html"><img src="kwiatek.gif" alt="urodziny"/></a>3</td>
<td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td><b>9</b></td>
</tr>
<tr align="center">
<th align="left">11</th> <td>10</td> <td>11</td> <td>12</td> <td>13</td>
<td>14</td> <td>15</td> <td><b>16</b></td>
</tr>
<tr>
<th>12</th> <td>17</td> <td>18</td> <td>19</td> <td>20</td>
<td>21</td> <td>22</td> <td><b>23</b></td>
</tr>
<tr>
<th>13</th> <td>24</td><td>25</td> <td>26</td> <td>27</td>
<td>28</td><td>29</td> <td><b>30</b></td>
</tr>
<tr>
<th>14</th> <td>31</td> <td></td> <td></td> <td></td> <td></td>
<td></td> <td></td>
</tr>
</table>
<h1 align="center"> Otaczanie tabeli tekstem </h1>
<p> Domyślnie tabela wyrównywana jest do lewej strony, a tekst umieszczany jest nad nią i pod nią. Atrybut align umożliwia wyrównanie tabel względem dowolnego marginesu i otaczanie ich tekstem np. align="left" powoduje wyrównanie tabeli względem lewego marginesu, a towarzyszący jej tekst jest umieszczany między prawą krawędzią strony a tabeli (L.Lemay:HTML4). </p>
</body>
</html>