Live
x
<html> <head> <title>Tabele</title> <style> td, th { border: 1px solid black; /* Zróbmy trochę miejsca w komórkach tabeli: */ padding: 10px; } .one { /* Domyślna wartość wynosi 2px, ale możemy to zmienić: */ border-spacing: 5px; } .two { border-collapse: collapse;; } </style> </head> <body> <p>Brak <code>border-collapse</code>. Każda komórka ma swój własny <code>border</code>:</p> <table class="one"> <thead> <tr> <th>Marka</th> <th>Model</th> <th>Kolor</th> </tr> </thead> <tbody> <tr> <td>Ford</td> <td>Focus</td> <td>Czarny</td> </tr> <tr> <td>Skoda</td> <td>Octavia</td> <td>Beżowy</td> </tr> <tr> <td>Seat</td> <td>Toledo</td> <td>Zielony</td> </tr> </tbody> </table> <p>Tabela z <code>border-collapse</code>. Sąsiadujące komórki mają jeden wspólny <code>border</code>:</p> <table class="two"> <thead> <tr> <th>Marka</th> <th>Model</th> <th>Kolor</th> </tr> </thead> <tbody> <tr> <td>Ford</td> <td>Focus</td> <td>Czarny</td> </tr> <tr> <td>Skoda</td> <td>Octavia</td> <td>Beżowy</td> </tr> <tr> <td>Seat</td> <td>Toledo</td> <td>Zielony</td> </tr> </tbody> </table> </body></html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.