CSS obramowanie tabeli

<style>

table{border:1px solid black}

</style>

<table>

<tr>

<td>Przykładowa tabela</td>

<td>Przykładowa tabela</td>

<td>Przykładowa tabela</td>

</tr>

<tr>

<td>Przykładowa tabela</td>

<td>Przykładowa tabela</td>

<td>Przykładowa tabela</td>

</tr>

</table>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget dui eget lectus efficitur elementum sagittis et diam. Vestibulum non fermentum enim. Maecenas ut leo lobortis, imperdiet nisl eu, rhoncus magna. Nulla vel laoreet nisi. Nunc tincidunt euismod sapien quis pellentesque. Mauris elementum rhoncus dui eu interdum. Donec in eleifend sapien. Cras rhoncus mi ligula, sed aliquam tellus laoreet quis. Integer risus velit, efficitur at dapibus non, aliquam ac felis. Cras fermentum iaculis sapien, vel eleifend nisi. Cras blandit, tellus id pulvinar sollicitudin, turpis ligula finibus dui, sit amet mattis lectus tellus a elit. Nunc ultrices finibus orci vitae viverra.

CSS obramowanie tabeli i komórek

<style>

table{border:1px solid black}

table td{border:1px solid black}

</style>

<table>

<tr>

<td>Przykładowa tabela</td>

<td>Przykładowa tabela</td>

<td>Przykładowa tabela</td>

</tr>

<tr>

<td>Przykładowa tabela</td>

<td>Przykładowa tabela</td>

<td>Przykładowa tabela</td>

</tr>

</table>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget dui eget lectus efficitur elementum sagittis et diam. Vestibulum non fermentum enim. Maecenas ut leo lobortis, imperdiet nisl eu, rhoncus magna. Nulla vel laoreet nisi. Nunc tincidunt euismod sapien quis pellentesque. Mauris elementum rhoncus dui eu interdum. Donec in eleifend sapien. Cras rhoncus mi ligula, sed aliquam tellus laoreet quis. Integer risus velit, efficitur at dapibus non, aliquam ac felis. Cras fermentum iaculis sapien, vel eleifend nisi. Cras blandit, tellus id pulvinar sollicitudin, turpis ligula finibus dui, sit amet mattis lectus tellus a elit. Nunc ultrices finibus orci vitae viverra.

Usunięcie odległości między komórkami

<style>

table{

border:1px solid black;

border-collapse:collapse;

}

table td{border:1px solid black}

</style>

<table>

<tr>

<td>Przykładowa tabela</td>

<td>Przykładowa tabela</td>

<td>Przykładowa tabela</td>

</tr>

<tr>

<td>Przykładowa tabela</td>

<td>Przykładowa tabela</td>

<td>Przykładowa tabela</td>

</tr>

</table>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget dui eget lectus efficitur elementum sagittis et diam. Vestibulum non fermentum enim. Maecenas ut leo lobortis, imperdiet nisl eu, rhoncus magna. Nulla vel laoreet nisi. Nunc tincidunt euismod sapien quis pellentesque. Mauris elementum rhoncus dui eu interdum. Donec in eleifend sapien. Cras rhoncus mi ligula, sed aliquam tellus laoreet quis. Integer risus velit, efficitur at dapibus non, aliquam ac felis. Cras fermentum iaculis sapien, vel eleifend nisi. Cras blandit, tellus id pulvinar sollicitudin, turpis ligula finibus dui, sit amet mattis lectus tellus a elit. Nunc ultrices finibus orci vitae viverra.

Zwiększenie odległości pomiędzy zawartością komórki, a obramowaniem

<style>

table{

border:1px solid black;

border-collapse:collapse;

}

table td{

border:1px solid black;

padding:10px;

}

</style>

<table>

<tr>

<td>Przykładowa tabela</td>

<td>Przykładowa tabela</td>

<td>Przykładowa tabela</td>

</tr>

<tr>

<td>Przykładowa tabela</td>

<td>Przykładowa tabela</td>

<td>Przykładowa tabela</td>

</tr>

</table>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget dui eget lectus efficitur elementum sagittis et diam. Vestibulum non fermentum enim. Maecenas ut leo lobortis, imperdiet nisl eu, rhoncus magna. Nulla vel laoreet nisi. Nunc tincidunt euismod sapien quis pellentesque. Mauris elementum rhoncus dui eu interdum. Donec in eleifend sapien. Cras rhoncus mi ligula, sed aliquam tellus laoreet quis. Integer risus velit, efficitur at dapibus non, aliquam ac felis. Cras fermentum iaculis sapien, vel eleifend nisi. Cras blandit, tellus id pulvinar sollicitudin, turpis ligula finibus dui, sit amet mattis lectus tellus a elit. Nunc ultrices finibus orci vitae viverra.

Otoczenie tabeli tekstem z prawej strony

<style>

table{

border:1px solid black;

float:left;

border-collapse:collapse;

}

table td{

border:1px solid black;

padding:10px;

}

</style>

<table>

<tr>

<td>Przykładowa tabela</td>

<td>Przykładowa tabela</td>

<td>Przykładowa tabela</td>

</tr>

<tr>

<td>Przykładowa tabela</td>

<td>Przykładowa tabela</td>

<td>Przykładowa tabela</td>

</tr>

</table>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget dui eget lectus efficitur elementum sagittis et diam. Vestibulum non fermentum enim. Maecenas ut leo lobortis, imperdiet nisl eu, rhoncus magna. Nulla vel laoreet nisi. Nunc tincidunt euismod sapien quis pellentesque. Mauris elementum rhoncus dui eu interdum. Donec in eleifend sapien. Cras rhoncus mi ligula, sed aliquam tellus laoreet quis. Integer risus velit, efficitur at dapibus non, aliquam ac felis. Cras fermentum iaculis sapien, vel eleifend nisi. Cras blandit, tellus id pulvinar sollicitudin, turpis ligula finibus dui, sit amet mattis lectus tellus a elit. Nunc ultrices finibus orci vitae viverra.

Wyśrodkowanie tabeli

<style>

table{

border:1px solid black;

margin:auto;

border-collapse:collapse;

}

table td{

border:1px solid black;

padding:10px;

}

</style>

<table>

<tr>

<td>Przykładowa tabela</td>

<td>Przykładowa tabela</td>

<td>Przykładowa tabela</td>

</tr>

<tr>

<td>Przykładowa tabela</td>

<td>Przykładowa tabela</td>

<td>Przykładowa tabela</td>

</tr>

</table>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget dui eget lectus efficitur elementum sagittis et diam. Vestibulum non fermentum enim. Maecenas ut leo lobortis, imperdiet nisl eu, rhoncus magna. Nulla vel laoreet nisi. Nunc tincidunt euismod sapien quis pellentesque. Mauris elementum rhoncus dui eu interdum. Donec in eleifend sapien. Cras rhoncus mi ligula, sed aliquam tellus laoreet quis. Integer risus velit, efficitur at dapibus non, aliquam ac felis. Cras fermentum iaculis sapien, vel eleifend nisi. Cras blandit, tellus id pulvinar sollicitudin, turpis ligula finibus dui, sit amet mattis lectus tellus a elit. Nunc ultrices finibus orci vitae viverra.

Zmiana obramowania tabeli

<style>

table{

border-top:1px solid black;

border-bottom:5px dotted red;

border-right:none;

border-left:10px dashed yellow;

margin:auto;

border-collapse:collapse;

}

table td{

border:1px solid black;

padding:10px;

}

</style>

<table>

<tr>

<td>Przykładowa tabela</td>

<td>Przykładowa tabela</td>

<td>Przykładowa tabela</td>

</tr>

<tr>

<td>Przykładowa tabela</td>

<td>Przykładowa tabela</td>

<td>Przykładowa tabela</td>

</tr>

</table>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget dui eget lectus efficitur elementum sagittis et diam. Vestibulum non fermentum enim. Maecenas ut leo lobortis, imperdiet nisl eu, rhoncus magna. Nulla vel laoreet nisi. Nunc tincidunt euismod sapien quis pellentesque. Mauris elementum rhoncus dui eu interdum. Donec in eleifend sapien. Cras rhoncus mi ligula, sed aliquam tellus laoreet quis. Integer risus velit, efficitur at dapibus non, aliquam ac felis. Cras fermentum iaculis sapien, vel eleifend nisi. Cras blandit, tellus id pulvinar sollicitudin, turpis ligula finibus dui, sit amet mattis lectus tellus a elit. Nunc ultrices finibus orci vitae viverra.

Opis tabeli - caption

<style>

table{

border-top:1px solid black;

border-bottom:5px dotted red;

border-right:none;

border-left:10px dashed yellow;

margin:auto;

border-collapse:collapse;

}

table td{

border:1px solid black;

padding:10px;

}

</style>

<table>

<caption>Taka tam tabelka</caption>

<tr>

<td>Przykładowa tabela</td>

<td>Przykładowa tabela</td>

<td>Przykładowa tabela</td>

</tr>

<tr>

<td>Przykładowa tabela</td>

<td>Przykładowa tabela</td>

<td>Przykładowa tabela</td>

</tr>

</table>

grupowanie kolumn colgroup i col

<style>

table{

border-top:1px solid black;

margin:auto;

border-collapse:collapse;

}

table td{

border:1px solid black;

padding:10px;

}

</style>

<table>

<caption>Taka tam tabelka</caption>

<colgroup>

<col style=" background:yellow">

<col span="2" style="background:green">

</colgroup>

<tr>

<td>Przykładowa tabela</td>

<td>Przykładowa tabela</td>

<td>Przykładowa tabela</td>

</tr>

<tr>

<td>Przykładowa tabela</td>

<td>Przykładowa tabela</td>

<td>Przykładowa tabela</td>

</tr>

</table>