How To Style A Table With CSS | DigitalOcean

How to Set the Font Family for the Table

To begin moving toward the final style of the table, you will move the border to be around the whole table, instead of the individual cells. Then, you will set a new default font-family for the page and adjust the default text alignment for the individual cells.

To update the borders, open styles.css in your text editor. Then, edit the existing group selector th, tr by removing the border: 1px solid black; property and value. This will remove the cell borders from the table; the padding will remain the same for the second stage of the table styles. Then, on the table type selector, add a border property with a value of 1px solid black. The following code block demonstrates how this will appear in your code:

styles.css table { border-collapse: collapse; border: 1px solid black; } th, td { padding: 8px; } ...

Save your changes to styles.css and return to your browser to refresh index.html. The border will now surround the whole table instead of the individual table cells, as illustrated in the following image:

To change the font for the whole document, return to styles.css in your text editor. Before the table selector block, add a body type selector. Within the body selector block, add the font-family property with a value of sans-serif. This will set the font for the page to the browser’s default sans-serif font, such as Helvetica or Arial. The highlighted CSS in the following code block indicates the changes to styles.css:

styles.css body { font-family: sans-serif; } table { border-collapse: collapse; border: 1px solid black; } ...

Save these changes to styles.css, then reload index.html in the browser. The font for the whole table will now have the browser’s default sans-serif font, as shown in the following image:

Finally, to adjust the alignment of the table’s contents, return to styles.css in your text editor. Browsers typically default the content alignment to a top left position. Similar to aligning content in a spreadsheet application, tables can have the content aligned to the middle of a table cell regardless of row height.

To set the horizontal middle alignment, go to the table type selector and add the text-align property with a value of center. Then, to set the vertical middle alignment, add the vertical-align property with a value of middle. The highlighted section of the following code block demonstrates how to add this to styles.css:

styles.css body { font-family: sans-serif; } table { border-collapse: collapse; border: 1px solid black; text-align: center; vertical-align: middle; } ...

Save your changes to styles.css and then return to the web browser to reload index.html. The cell contents will now be horizontally and vertically centered within the cell. Note that the <th> cells have not changed their spacing. This is because table headers have centered text as a default.

The vertical centering will not be immediately evident with the content as it is, but should the content of one cell wrap to a second line, the remaining cells in the row will vertically align their contents.

The following image shows how this will appear in the browser:

In this section, you moved the border property from the table cells to the whole table. You also set a new font family for the page and changed the default alignment for the contents of the table cells. In the next section, you will add styles to the table’s <caption> element and learn more about its purpose.