What Are HTML Columns?

In HyperText Markup Language (HTML) documents, columns are a way to define an area of a website that generally has a width smaller than the total displayable 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 also can use standard elements to define its width, alignment and spacing. Traditionally, HTML columns were just one 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 problems that come with using HTML columns, although these can largely be overcome with careful design and coding.

HTML columns originally were one 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 collection of cells that are lined up consecutively and run from top to bottom. A table usually has multiple columns. Each cell in a column can have its own independent formatting and spacing, as well as being able to span more than one row.

With CSS, HTML columns are actually not part of a table, but are divisions of space nested inside other divisions. This allows multiple columns like an HTML table, except that the features of CSS permit the exact same formatting to be effortlessly applied to many pages throughout a single site. Using CSS to form columns, however, does cause problems with the implementation of the division tags in certain browsers in which the alignment and treatment of columns and their content does not adhere to accepted standards.

The width of HTML columns can be specified in a document’s code, either by stating the exact pixel dimensions or through a relative percentage measurement. This means a column can be created by stating it is 200 pixels across or 25 percent of the width of the viewer display. Specifying the pixel dimensions of a column can help to ensure that images and other advanced layout elements are perfectly arranged and scaled, although it means the page might appear much larger or smaller than desired at various screen resolutions. Creating a column using relative percentages means the column will scale to the desire dimensions no matter what the viewer’s screen size is, but leads to issues in which the content of the column might be displayed incorrectly because of extra or insufficient space.