How to Replace Tables With Divs
Tableless Web design uses CSS and div tags to lay out data on the page. You can replace your HTML tables with "div" tags. For each table row and column tag, you replace the existing HTML code with a div tag. The process makes the HTML code cleaner and more easily read by other coders who need to edit or add to your HTML projects.
Other People Are Reading
Instructions
-
-
1
Right-click the Web page with the tables you want to replace and select "Open With" from the context menu. Click the HTML or text editor you want to use to edit the page.
-
2
Locate the table that you want to edit. Replace the "<table>" tag with your first div, which becomes the main div container. Replace all rows and columns within the table with nested div tags. The following code is an example of an HTML table:
<table>
<tr>
<td>first column</td>
<td>second column</td>
</tr>
</table>
Replace the "<table>" tag with an opening "<div>" tag and replace "</table>" with a closing "</div>" tag.
-
-
3
Replace the table row or "<tr>" tags with div tags. Using the table from Step 2, the following code replaces the table row tags with div tags:
<div id="maincontainer">
<div id="tablerow">
<td>first column</td>
<td>second column</td>
</div>
</div>
-
4
Replace the table's cells or columns. The "<td>" tags contain your data. The following code completes the replacement of the HTML table with div tags:
<div id="maincontainer">
<div id="tablerow">
<div id="cell1">first column</div>
<div id="cell2">second column</div>
</div>
</div>
-
1
