How to Make 2 Columns on a Webpage

How to Make 2 Columns on a Webpage

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).

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

    tag. After the Table tag will be the caption of the table. The caption is entered between the opening HTML tags.
    and closing

    4

    Enter the row tags

    , followed by the corresponding header tag with the label following the


    Table Caption Is Inserted Here
    tag.
    After the header tag, the cell tags are listed     		Cell 1 Cell 2
    First Header Cell 1 Cell 2
    Second Header Cell 3 Cell 4
    Third Header Cell 5 Cell 6

    5

    Once the cell entries for the table are complete, close the table entry

    .
    Verify that the data listed in the table is correct.

Formatting HTML Table Data With CSS

    6

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

    7

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

    8

    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
    TRrow1 border-top: 3px solid black
    TRrow2 border-top: 1px solid blue
    TRrow3 border-top: 1px solid blue

    9

    Place the table caption above the table.
    CAPTION caption-side: top

Blog Archive