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.
Other People Are Reading
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:
<table width="550">
<tr>
<td width="60%">My Section 1</td>
<td width="40%">My Section 2</td>
</tr>
</table> -
2
Replace the "<table>" 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:
<div style="width: 600px;">
</div> -
-
3
Replace the "<tr>" 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.
<div style="width: 600px;">
<div></div>
</div> -
4
Replace the table cell tags noted as "<td>" 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.
<div style="width: 600px;">
<div>
<div style="float: left; width: 60%;">My Section 1</div>
<div style="float: left; width: 40%;">My Section 2</div>
</div>
</div>
-
1
