Ćwiczenie 7_HTML_TABELE
Przykładowa tabela może zatem wyglądać następująco:
<table>
<tr>
<th>11</th>
<th>12</th>
<th>13</th>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</table>
_____________________________________-
Grubość obramowania wokół tabeli - atrybut border. Jako wartość podaje się jakie grube ma być to obramowanie (w pikselach):
<table border="5">
<tr>
<td>11</td><td>12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table>
______________________________________-
<table border>
<tr>
<td>11</td><td>12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table>
<body>
wielkość odstępu pomiędzy komórkami (w pikselach) - atrybut cellspacing:
<table border="1" cellspacing="10">
<tr>
<td>11</td><td>12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table>
</body>
</html>
wielkość odstępu pomiędzy zawartością komórki a jej obramowaniem (w pikselach) - atrybut cellpadding:
<table border="1" cellpadding="10">
<tr>
<td>11</td><td>12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table>
_________________________________________________________________
szerokość tabeli - atrybut width. Można ją określić w pikselach lub w procentach szerokości elementu wewnątrz którego tabela jest umieszczona (jeżeli nie jest w żadnym, to brana jest szerokość okna przeglądarki):
<table border="1" width="200">
<tr>
<td>11</td><td>12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table>
<br>
<table border="1" width="50%">
<tr>
<td>11</td><td>12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table>
wysokość tabeli (w pikselach) - atrybut height.
Uwaga: Atrybut ten nie jest co prawda oficjalną częścią standardu HTML, ale jest interpretowany przez większość przeglądarek. Zamiast niego powinno się jednak stosować odpowiednie polecenie kaskadowych arkuszy stylów CSS:
<table border="1" height="100">
<tr>
<td>11</td><td>12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table>
<table border="1" style="height: 100px">
<tr>
<td>11</td><td>12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table>
Kolor tła tabeli - atrybut bgcolor. Jako wartość należy podać nazwę koloru lub jego kod szesnastkowy (przykładową listę kodów kolorów znajdziesz w artykule Bezpieczna paleta kolorów). Atrybut ten nie jest zalecany - zamiast niego powinno się stosować odpowiednie polecenie kaskadowych arkuszy stylów CSS:
<table border="1" bgcolor="yellow">
<tr>
<td>11</td><td>12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table>
<table border="1" style="background-color: yellow">
<tr>
<td>11</td><td>12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table>
_______________________________________________________________________________-
wyrównanie tekstu w komórce - atrybut align. Dostępne są następujące wartości: left, center i right. Przykład:
<table border="1" width="200">
<tr>
<td align="right">11</td><td align="center">12</td>
</tr><tr>
<td align="left">21</td><td>22</td>
</tr>
</table>
__________________________________________________________________-
wyrównanie zawartości komórki w pionie - atrybut valign. Dostępne są wartości: top, middle i bottom. Przykład:
<table border="1" width="200" style="height: 100px">
<tr>
<td valign="top">11</td><td valign="middle">12</td>
</tr><tr>
<td valign="bottom">21</td><td>22</td>
</tr>
</table
szerokość komórki (w pikselach lub w procentach szerokości tabeli) - atrybut width. Atrybut ten nie jest zalecany - zamiast niego powinno się stosować odpowiednie polecenie kaskadowych arkuszy stylów CSS:
<table border="1">
<tr>
<td width="50">11</td><td width="100">12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr></table>
_____________________________________________________________________________
<table border="1" width="200">
<tr>
<td width="30%">11</td><td width="70%">12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table>
<table border="1">
<tr>
<td style="width: 50px">11</td><td style="width: 100px">12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table>
<br />
<table border="1" width="200">
<tr>
<td style="width: 30%">11</td><td style="width: 70%">12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table>kolor tła w komórce - atrybut bgcolor. Jako jego wartość należy podać nazwę koloru lub jego kod szestnastkowy. Atrybut ten nie jest zalecany - zamiast niego powinno się stosować odpowiednie polecenie kaskadowych arkuszy stylów CSS:
<table border="1"><tr>
<td bgcolor="red">11</td><td bgcolor="green">12</td>
</tr><tr>
<td bgcolor="yellow">21</td><td bgcolor="blue">22</td>
</tr>
</table>
<table border="1"><tr>
td style="background-color: red">11</td>
<td style="background-color: green">12</td>
</tr><tr>
<td style="background-color: yellow">21</td>
<td style="background-color: blue">22</td>
</tr>
</table>