Pages

Tuesday, August 6, 2013

How to Convert HTML Tables

Tables were an old method of designing website graphics and layouts. Tables are old technology that makes it hard to format a website. CSS div tags have replaced tables as a standard for website design. Converting tables to CSS div tags creates a cleaner, easier design for web developers and programmers.

Instructions

    1

    Evaluate the table that needs to be replaced. Each table, row, and column elements needs to be replaced with div tags. The following is an example of a table layout:






    My Section 1 My Section 2

    2

    Replace the "

    " tag with a div. The original table has a width of 550 pixels. The div tag also needs to be 550 pixels. Below is the code to create a div that matches the same width of the original table:

    3

    Replace the "

    " tag. This tag indicates a table row. There are no attributes on the original table row, so a simple tag with no properties is used.


    4

    Replace the table cell tags noted as "

    " in the table element. In the original table, the first column is 60% of the table's width and the second column is 40% of the table width. The following shows you how to create columns that are the same width as the original table.


    My Section 1

    My Section 2


    0 comments:

    Post a Comment