How can you modify table layouts using CSS?

1 Basic table properties

CSS offers several properties that can affect the appearance and behavior of tables. Some of the most important ones are:

- border-collapse : This property determines whether the borders of adjacent table cells are collapsed into a single border or separated by space. The default value is separate , but you can use collapse to create a more compact and solid table.

- border-spacing : This property specifies the horizontal and vertical distance between the borders of adjacent table cells. It only applies when border-collapse is set to separate . You can use this property to create gaps or margins between table cells.

- table-layout : This property controls how the table is laid out by the browser. The default value is auto , which means the browser will adjust the table width and column width based on the content and available space. You can use fixed to set a fixed table width and column width regardless of the content, or use inherit to inherit the value from the parent element.

2 Table selectors

CSS also provides some selectors that can target specific parts of a table, such as rows, columns, cells, headers, and footers. Some of the most useful ones are:

- :nth-child() : This pseudo-class selector can match elements based on their position in a group of siblings. For example, you can use tr:nth-child(odd) to select every odd-numbered row in a table, or use td:nth-child(3) to select the third cell in every row.

- :first-child and :last-child : These pseudo-class selectors can match the first or last element in a group of siblings. For example, you can use tr:first-child to select the first row in a table, or use td:last-child to select the last cell in every row.

- :empty : This pseudo-class selector can match elements that have no children or text content. For example, you can use td:empty to select empty cells in a table and style them differently.

- thead , tbody , and tfoot : These elements can group rows into logical sections within a table. For example, you can use thead to contain the header rows, tbody to contain the data rows, and tfoot to contain the footer rows. You can then use these elements as selectors to style each section differently.

4 Accessible tables

When using tables in web design, it is important to make them accessible, so that they can be understood and navigated by users with disabilities or assistive technologies. To create accessible tables with CSS, there are some best practices and guidelines you should follow. For instance, you can use the caption element to provide a title or description for the table, and the summary attribute to provide a brief overview of the table structure and content. Additionally, you can use the th element to mark the header cells in a table, and the scope attribute to indicate whether they apply to a row, a column, or a group of rows or columns. Moreover, you can use the aria-label and aria-labelledby attributes to provide alternative text or labels for the table or its parts. This is especially useful when they are not visible or clear. By following these best practices and guidelines, you can ensure that your tables are accessible for all users.

6 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?