What are HTML cols?

Print anything with Printful



HTML columns allow for formatting similar to print without using unreliable tricks. They were originally part of a larger table structure but can now be created with CSS. Column width can be specified in pixels or percentage, but both have potential formatting issues.

In HyperText Markup Language (HTML) documents, columns are a way to define an area of ​​a website that is typically less than the total viewable width of a page. HTML columns allow web page designers to use formatting similar to print formatting without having to resort to unreliable tricks, such as blank images, to create spacing. Each column can also use standard elements to define its width, alignment and spacing. Traditionally, HTML columns were just a part of a larger HTML table, although the introduction of cascading style sheets (CSS) made it possible to define a column without having to create an entire table. There are some formatting and compatibility issues that come with using HTML columns, although these can largely be overcome with careful design and coding.

HTML columns were originally a part of a larger formatting structure known as a table. An HTML table can be thought of as a grid, with each square in the grid called a cell. A column is a set of cells lined up consecutively and from top to bottom. A table usually has multiple columns. Each cell in a column can have its own independent formatting and spacing, and can span more than one row.

With CSS, HTML columns aren’t actually part of a table, but are divisions of space nested within other divisions. This allows for multiple columns like an HTML table, except that the capabilities of CSS allow you to easily apply the exact same formatting to many pages in a single site. Using CSS to form columns, however, causes problems with the implementation of split tags in some browsers where the alignment and handling of columns and their content does not adhere to accepted standards.

The width of HTML columns can be specified in the code of a document, indicating the exact dimensions in pixels or via a relative percentage measure. This means that you can create a column that claims it is 200 pixels wide or 25% of the viewer display width. Specifying the pixel dimensions of a column can help ensure that images and other advanced layout elements are perfectly arranged and scaled, although this does mean that the page may appear much larger or smaller than desired at various screen resolutions. Creating a column using relative percentages means that the column will scale to the desired size regardless of the viewer screen size, but leads to issues where the column contents may display incorrectly due to too much or too little space.




Protect your devices with Threat Protection by NordVPN


Skip to content