DEV Community

keepoSteepo
keepoSteepo

Posted on

2

Everything Table

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; }

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs