How to Make 2 Columns on a Webpage

Example of a website using columns

When web surfing began to become more widespread and entered the commercial mainstream in the late 1990s and early 2000s, it was very common to see three and four columns on a website. As the industry has matured and significant studies have been done on usability of content vs. consumer action, most results indicate that simpler approaches by web authors are more effective in getting the website message across to the end-user. To help users find what they want to see on the website, design standards have evolved to using two columns in website formats and generally no more than three in current website design. Creating columns in a website allows the web author to represent relationships between data, and can further modify the presentation of the data through the use of cascading spreadsheets (CSS).

Things You'll Need

• Web-authoring tool

Instructions

Creating Two Columns in a Web Page

1. Open an existing web page or new web-page template in an HTML editor or text editor.

2. Determine the number of columns and rows desired for the table. In this example, two columns and four rows will be displayed.

3. Start the HTML code for the table with the <Table> tag. After the Table tag will be the caption of the table. The caption is entered between the opening <CAPTION> and closing </CAPTION> HTML tags.
   <TABLE>
   <CAPTION>Table Caption Is Inserted Here</CAPTION>

4. Enter the row tags <TR id="row1">, followed by the corresponding header tag with the label following the <TH> tag.
   After the header tag, the cell tags are listed <TD> Cell 1 <TD> Cell 2
   <TR id="row1">
   <TH>First Header <TD>Cell 1 <TD>Cell 2
   <TR id="row2">
   <TH>Second Header <TD>Cell 3 <TD>Cell 4
   <TR id="row3">
   <TH>Third Header <TD>Cell 5 <TD>Cell 6

5. Once the cell entries for the table are complete, close the table entry </TABLE>.
   Verify that the data listed in the table is correct.

Formatting HTML Table Data With CSS

1. Align text to the left of each cell with a bold font with the following CSS rule:
   TH { text-align: center; font-weight: bold }

2. Align the header cell text on the baseline, with the text vertically centered in each cell.
   TH { vertical-align: baseline }
   TD { vertical-align: middle }

3. Add borders to the table. The following rules will ensure that the top row is surrounded by a 3-pixel black border, and the other rows by a 1-px blue border.
   TABLE { border-collapse: collapse }
   TR#row1 { border-top: 3px solid black }
   TR#row2 { border-top: 1px solid blue }
   TR#row3 { border-top: 1px solid blue }

4. Place the table caption above the table.
   CAPTION { caption-side: top }

Tips & Warnings

• Make sure that the important pieces of information are highlighted at the left and top of a column, to draw the reader's eye. Place white space in between bullets and sub-bullets.

• Creating a website with more than three columns can reduce usability and decrease overall website traffic \ Highlight keywords by providing hyperlinks to related content in the text of the website.

Resources

• Web 2.0 How-To Design Guide
• Jack Nielsen's Usability Website