DEV Community

loading...

Everything Table

keepoSteepo
・2 min read

The number of table columns in a table is determined by the table cells placed in the table rows.

If I were to write a code to create a table row with three header cells containing Tompkins, Ramirez, and David as the text, it would look something like this;


Tompkins
Ramirez
David

Now, if I was writing a code to create a table row with three data cells containing the same text, it would look something like this;


Tompkins
Ramirez
David

A style rule in order to display all table elements with collapse borders is
Table { border-collapse: collapse; }

If two table cells had adjacent borders with one cell having a 5-pixel-wide double border and the other cell having a 6-pixel-wide solid border, if the table borders were to be collapsed, the result would be that the cells now share the border with the larger with. In this case that is the 6-pixel-solid border.

A table data cell containing the text Monday stretching across two rows and three columns would look like this;

Monday

In order to adjust a table when a cell spans multiple columns so that it may stay aligned, one needs to reduce the number of cells following the spanning cell.

Now, to adjust a table when a cell spans multiple rows so that it may stay aligned, one would have to reduce the number of cells in the rows following the spanning cell.

The style rule to display all table captions at the lower-left corner of the table is;
Caption { caption-side: bottom; }

Discussion (0)