Tabele
Obramowanie
1
2
3
4
<table id="test1"> <tr><td class="test2">1</td><td>2</td></tr> <tr><td>3</td><td class="test2">4</td></tr> </table> style.css: #test1{ border-width:4px; border-style:groove; border-color: red; } .test2{ border-width:3px; border-style:solid; }
Margines wewnętrzny
1
2
3
4
<table id="test3"> <tr><td class="test2">1</td><td class="test2">2</td></tr> <tr><td class="test2">3</td><td class="test2">4</td></tr> </table> style.css: #test3{ padding: 15px; border-width:3px; border-style:solid; }
Margines wewnętrzny
1
2
3
4
<table class="test2"> <tr><td class="test4">1</td><td class="test2">2</td></tr> <tr><td class="test2">3</td><td class="test4">4</td></tr> </table> style.css: .test4{ border-width:3px; border-style:solid; padding: 15px; }
Szerokość między komórkami
Nagłówek tabeli
1
2
3
4
<table class="test5"> <tr><td class="test2">1</td><td class="test2">2</td></tr> <tr><td class="test2">3</td><td class="test2">4</td></tr> </table> style.css: .test5{ border-width:3px; border-style:solid; border-spacing:10px; }
Położenie nagłówka tabeli
Nagłówek tabeli
1
2
3
4
<table class="test6"> <caption>Nagłówek tabeli</caption> <tr><td class="test2">1</td><td class="test2">2</td></tr> <tr><td class="test2">3</td><td class="test2">4</td></tr> </table> style.css: .test6{ border-width:3px; border-style:solid; caption-side:bottom; /*top*/ }
Połączenie obramowań
1
2
3
4
<table class="test7"> <tr><td class="test2">1</td><td class="test2">2</td></tr> <tr><td class="test2">3</td><td class="test2">4</td></tr> </table> style.css: .test7{ border-width:4px; border-style:dotted; border-collapse:collapse; /*separate*/ }
Kolor tła
1
2
3
4
<table id="test8"> <tr id="test9"><td>1</td><td>2</td></tr> <tr><td>3</td><td id="test10">4</td></tr> </table> style.css: #test8{ background-color:yellow; } #test9{ background-color:red; } #test10{ background-color:green; }
Wysokość i szerokość
1
2
3
4
<table id="test11"> <tr id="test12"><td>1</td><td>2</td></tr> <tr><td>3</td><td id="test13">4</td></tr> </table> style.css: #test11{ background-color:yellow; width:100%; height:400px; } #test12{ background-color:red; height:100px; } #test13{ background-color:green; width:80%; }
Wyrównanie tekstu w poziomie
1
2
3
4
<table id="test14"> <tr id="test15"><td>1</td><td>2</td></tr> <tr><td>3</td><td id="test16">4</td></tr> </table> style.css: #test14{ background-color:yellow; width:100%; height:400px; text-align:center; } #test15{ background-color:red; height:100px; text-align:right; } #test16{ background-color:green; width:80%; text-align:left; }
Wyrównanie tekstu w pionie
1
2
3
4
<table id="test14"> <tr id="test17"><td>1</td><td>2</td></tr> <tr><td>3</td><td id="test18">4</td></tr> </table> style.css: #test17{ background-color:red; height:100px; text-align:right; vertical-align:top; } #test18{ background-color:green; width:80%; text-align:left; vertical-align:bottom; }