How to Add Columns in HTML — Like a Boss

Adding columns in HTML is a neat way to improve your reader’s journey because it makes your data far more digestible.

Trouble is, columns in HTML are added using the table tag, and since that is not responsive, it is not the best option.

Using the HTML table tag spans your columns the width of the screen it is displayed on.

There are two methods to add columns in HTML. Which one you use depends on your intent for the columns, because technically, one is a table, and the other uses HTML and CSS columns.

Where the intent is to use columns for design purposes, such as the layout of a webpage, HTML/CSS would be the better choice because those are responsive columns.

For comparison columns that perhaps only show icons or small segments of data, the HTML table tag for columns may suffice.

Follow along with the HTML tutorial below to learn all there is to know about adding HTML columns with and without CSS.

How to add columns in HTML

Adding columns in HTML is done using the table tag along with the style tag to set the max width. It is not recommended because HTML only is not responsive. Modern browsers use HTML and CSS3 to display responsive columns.

Step 1: Set your table width

When you open a table tag, the style width can be applied in-line without inserting it into the style section of your HTML document.

Set your table width to your preference. A 1200px max width is generally viewable on PC screens. On smaller devices, the content would stretch beyond the screen.

When that happens, users are presented with a horizontal scroll bar and would need to swipe across to view a multi-column layout.

Keep this in mind if you plan to design an entire web page layout using HTML columns.

Step 2: Set up your column layout

To add a multi-column layout in HTML, the “td” (table data) tag is used – one for each column you want.

As an example, if you wanted a three-column layout, you would add three rows of “td” to insert your content for each column.

If you want to add headers above your column content, you can add a row for (table header).

The best practice is to make columns responsive. There may be times when you can make do with HTML columns only, such as adding an image aligned to the left or right of the content.

How to add columns in HTML and CSS (responsive columns)

For modern web design, responsive layouts are the way to go. It fits your content to the screen, whichever the screen size is.

Step 1: Make your HTML responsive with CSS

The starter template for all responsive HTML layouts uses the following snippet.

The important part in the snippet above for a responsive layout is “viewport”. This is a function of CSS but is wholly compatible with HTML.

What this does is instructs browsers to make the width of your layout the max width of the user’s browser pane.

The “viewport” is the visible pane within a browser.

The difference between columns with the HTML table tag and one that uses the viewport is that the table tag includes a fixed width, whereas with HTML/CSS, the width of your column responds to the width of the user’s device screen size.

The snippet controlling that is:

With this included, your columns may only show 1 column on a smartphone only capable of viewing 320 pixels wide but may go up to 3 or more columns where space in the viewport pane permits.

The extra part for “initial-scale=1” is instructing the browser to match the pixel settings of the device. This is an accessibility feature.

Setting the initial scale to more than one zooms in on the body of the content. Setting it to one allows users to zoom in and out to suit their viewing preferences.

Step 2: Place your column content within a div tag

The “div” tag is used in HTML to apply sections to your layout.

For layouts with columns that use both HTML and CSS, the entire body of the content can be placed within a central div for a full-page column layout.

To apply a div for columns, name your section something identifiable, such as “columns”. The more styling you apply with CSS, the more important it becomes to pay attention to your naming conventions.

How to add div tags

Each div tag needs a class assigned for identification. This is done with the following:

For the purposes of columns, a sensible name would be

Place this before the first paragraph you want to appear in the first column.

As an example:

If you are using a code editing program, such as Notepad++, Codepen, Brackets, Visual Code Editor, etc, some programs may add a closing tag directly after your opening tag. The content should go between them.

The close tag is:

Place the closing div tag where you want your columns to end.

Step 3: Style your columns

In the starter template used in the previous step, there is a section applied for “style”. HTML and CSS are harmonious so you can style your columns in CSS within an HTML template.

Using HTML only, no styling elements can be applied, other than applying padding to the page margins and borders to cells within and around a table.

To apply styling with CSS, insert your CSS properties in the “style” part of your opening source code.

Place a period before the name of your “div” (divider) tag followed by a space, then an opening brace (curly bracket), then a line break, and then add your styling elements, as shown in the snippet above.

CSS column elements explained

The “columns:” section is instructing browsers to display columns with a width of 250px, up to a maximum of 3 columns. You can also use width only without a column max number.
To only use a column number, use “column-count: #”.

The “column-gap:” controls the distance between the columns. The larger the number, the more white space you will have. Lower the column-gap number and the columns will be closer together.

The “column-rule:” is used to apply styling to all columns universally.

In the example above, a solid brown line divider is set to show at 1px between each column.