Member Avatar for ytregnn

I've until now created all my webpages in tables but have recently been thinking about starting to use divs instead.

I've been thinking about trying to convert one of my ccurrent projects (from tables) to divs - anyone that happen to know some smart way to do this (without writing all the code again from the beginning)?

  • 5 Contributors
  • 4 Replies
  • 106 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by zukilover

Dani AI

Generated

Quick, practical plan that pulls together points from , , , and and gives an incremental, low‑risk way to convert layout tables to CSS.

Start by auditing pages and classifying tables: keep true data tables, mark purely presentational tables for refactor. Pick one representative page and build a prototype rather than trying to convert everything at once. Use semantic structure (header, nav, main, aside, footer) and move presentation into a stylesheet. Replace table cells with logical blocks and express the layout in CSS (Grid for two‑dimensional layouts, Flexbox for one‑dimensional flows). Iterate on the prototype until it responds correctly at common breakpoints, then reapply the markup and class pattern to other pages.

A tiny Grid example for a fixed five-column pattern:

<div class="layout-grid">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
</div>

<style>
.layout-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
</style>

Practical cautions and workflow tips: quick find-and-replace can produce a working prototype (as tried) but is brittle on real sites; for many files use a DOM-aware tool (jsdom/cheerio, Python BeautifulSoup, or similar) rather than regex. Use consistent class names up front so automated transforms are reliable (an idea from ). Preserve accessibility: keep data tables as tables, and if a table must stay for legacy reasons mark it as presentational (role="presentation" / role="none") only when appropriate. Test with browser devtools and a screen reader. If stuck, post a minimal sample (as suggested) for a focused example.

Further reading: CSS Grid, Flexbox, HTML table element.

Recommended Answers

All 4 Replies

Member Avatar for almostbob

I dont have an answer, but I'm fascinated by the question
I remade my tables hard
I did a lot of find and replace

<!--almost-->
<table> <div class='outer'>
</table> </div>
<tr> <div class='row'>
</tr> </div>
<td> <span class='cell'>
</td> </span>

<style type='text/css'>
.outer { width:95%; border:1px solid #000000; }
.row { border_bottom:1px solid #000000; }
.cell { width 18%; }
</style>

there were five columns in the table

Member Avatar for laura_ci

Erm... It really depends what way your page is coded, and to be honest, chances are to do the job right, you'll have to code from the start. Sorry.

It would help if you posted some sample code and I could try and show you how I'd lay it out in divs and css instead...

Once you have some practice, you'll wonder why you ever coded in tables! :) Though if something needs to be in a table, say, 'a table of contents' ;) then be all means, go nuts! :)

Member Avatar for Gilette

Strategically, I would firstly being thinking of the stylish problem. To solve that I would use both "class" and "id" to mark the becoming div-tags.
I guess there must be a lot of tables in one page only and every table would be set to a certain class. Within the table, there would be a lot of table data, td, th, and so on. All of them need to have the table class but also a specific id.
When it comes to nested tables (tables within another table), I would extend the class name with an underline and a new class name, like: class="myTab_tab1" and class="myTab_tab2", and so on. The same would be able to do with id.

In the end of all this, I understand that u have a lot of files and u wish to convert all of them, it is suitable to use a tool that enforce the conversion by the naming structure I have demonstrated for u here. The secret lies in the method of structure. Since table is a certain structure, all u need is to think of how you can replica the structure with div tags. I guess there will already be advanced word processors able to apply with a batch programming type ready for you to input some conversion orders and run. In that way you can solve the problem at hand in a suitable and rather comfortable way.

Member Avatar for zukilover

that's impossible to convert it without re-coding. Because they're both completely different.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.