Cell Padding and Spacing
We currently have the following table:| Breakfast | Lunch | Dinner |
|---|---|---|
| eggs | sandwich | steak |
| migas | burger | grilled salmon |
The cells automatically adjust in size to accomodate the longest element
in the row or column. However, we can use CSS to add additional
space. The property for controlling space within a cell is padding.
The amount of cellpadding for a table is defined in the CSS for the
table, header, and cell tags
| Breakfast | Lunch | Dinner |
|---|---|---|
| eggs | sandwich | steak |
| migas | burger | grilled salmon |
CSS Source
.tablePadding th, .tablePadding td { padding:10px; }
/* css for aligning the data cells */
.tableDataAlignment { text-align:center; }
/* css for setting the table's alignment */
.tableLocation {
margin:auto;
}
/* css for setting the caption's alignment */
.alignCaption {
margin: auto;
}
/* css for setting the table's border */
.tableBorder, .tableBorder th, .tableBorder td {
border-style:solid;
border-color:black;
border-width:1px
}
| Breakfast | Lunch | Dinner |
|---|---|---|
| eggs | sandwich | steak |
| migas | burger | grilled salmon |
CSS Source
.tableBorderSpacing { border-spacing:10px; }
/* css for aligning the data cells */
.tableDataAlignment { text-align:center; }
/* css for setting the table's alignment */
.tableLocation {
margin:auto;
}
/* css for setting the caption's alignment */
.alignCaption {
margin: auto;
}
/* css for setting the table's border */
.tableBorder, .tableBorder th, .tableBorder td {
border-style:solid;
border-color:black;
border-width:1px
}
Thus border-spacing refers to the amount of space we want between cells.
