HTML Tables Padding & Spacing
Proper padding and spacing in tables can enhance readability and overall design. Tailwind CSS provides utilities to control padding within table cells and spacing between them. Below are examples showcasing different padding and spacing configurations.
Default Padding
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| Data 1 | Data 2 | Data 3 |
Increased Padding
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| Data 1 | Data 2 | Data 3 |
Decreased Padding
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| Data 1 | Data 2 | Data 3 |
Increased Spacing Between Rows
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| Data 1 | Data 2 | Data 3 |
| Data 4 | Data 5 | Data 6 |