0

I'm going to implement this enter image description here

The layout is exactly like it is tables so I'm considering using tables instead of divs as recommended. What do you recommend? Could you give me a code skeleton to start with so that I know how to begin since otherwise I will just do tables since that is the way this page looks - tabular data. What do you recommend?

My start displays this

enter image description here

And the code I used for this is

<div class="yta2 TB_nb fontS80 "> <div class="clear ">&nbsp;</div> <div class="fr1 ">&nbsp;</div> <div class="fr5 "><input type="button" value="Historik"></div> <div class="fl30"><h2>Grunduppgifter</h2></div> <div class="clear quarter">&nbsp;</div> </div> <div class="clear "></div> <div id="indag" class="yta2 TB_nb fontS80"> <div class="clear half">&nbsp;</div> <div class="fl10"><h3>Ingivningsdag</h3></div> <div class="fl20">Ans&ouml;kans beroende:</div> <div class="fl20">Oberoende ans&ouml;kan</div> <div class="fl10">&nbsp;</div> <div class="fl1">&nbsp;</div> <div class="fl20"></div> <div id="ob"> <div class="fr10 smallg">F&ouml;rnamn Efternamn,<br>handl&auml;ggarkod<br><br></div> <div class="fl10"></div> <div id="datum" class="fl20">Datum ingivningsdag:</div> <div class="fl20">2009-01-01 </div> <div id="ff" style="display: none;"> <div class="fr10 smallg">F&ouml;rnamn Efternamn,<br>handl&auml;ggarkod</div> <div class="fl10"></div> <div class="fl20">Fullf&ouml;ljd fr&aring;n:</div> <div class="fl20"><input type="text"></div> <div class="clear"></div> <div class="fl10"></div> <div class="fl20">WO-nummer:</div> <div class="fl20"><input type="text"></div> <div class="clear"></div> <div class="fl10"></div> <div class="fl20">Internationell ingivningsdag:</div> <div class="fl20"><input type="text">&nbsp;<img src="images/cal.gif" alt="" width="16" height="15" border="0"></div> </div> <div id="avd" style="display: none;"> <div class="fr10 smallg">F&ouml;rnamn Efternamn,<br>handl&auml;ggarkod</div> <div class="fl10"></div> <div class="fl20">Avdelad fr&aring;n:</div> <div class="fl20"><input type="text"><input type="button" value="S&ouml;k"></div> <div class="clear"></div> <div class="fl10"></div> <div id="datum" class="fl20">Datum ingivningsdag:</div> <div class="fl20"><input type="text">&nbsp;<img src="images/cal.gif" alt="" width="16" height="15" border="0"></div> </div> <div id="utb" style="display: none;"> <div class="fr10 smallg">F&ouml;rnamn Efternamn,<br>handl&auml;ggarkod</div> <div class="fl10"></div> <div class="fl20">Utbruten fr&aring;n:</div> <div class="fl20"><input type="text"><input type="button" value="S&ouml;k"></div> <div class="clear"></div> <div class="fl10"></div> <div id="datum" class="fl20">Datum ingivningsdag:</div> <div class="fl20"><input type="text">&nbsp;<img src="images/cal.gif" alt="" width="16" height="15" border="0"></div> </div> <div id="oepa" style="display: none;"> <div class="fr10 smallg">F&ouml;rnamn Efternamn,<br>handl&auml;ggarkod</div> <div class="fl10"></div> <div class="fl20">EP- ans&ouml;kningsnummer:</div> <div class="fl20"><input type="text"><input type="button" value="S&ouml;k"></div> <div class="clear"></div> <div class="fl10"></div> <div id="datum" class="fl20">Ankomstdatum (EP-ans&ouml;kan)<br>eller ingivningsdag (EP-ans&ouml;kan):</div> <div class="fl20 mt5p"><input type="text">&nbsp;<img src="images/cal.gif" alt="" width="16" height="15" border="0"></div> </div> <div id="aooep" style="display: none;"> <div class="fr10 smallg">F&ouml;rnamn Efternamn,<br>handl&auml;ggarkod</div> <div class="fl10"></div> <div class="fl20">Avdelad fr&aring;n:</div> <div class="fl20"><input type="text"><input type="button" value="S&ouml;k"></div> <div class="clear"></div> <div class="fl10"></div> <div class="fl20">EP- ans&ouml;kningsnummer:</div> <div class="fl20"><input type="text"><input type="button" value="S&ouml;k"></div> <div class="clear"></div> <div class="fl10"></div> <div id="datum" class="fl20">Ankomstdatum (EP-ans&ouml;kan)<br>eller ingivningsdag (EP-ans&ouml;kan):</div> <div class="fl20 mt5p"><input type="text">&nbsp;<img src="images/cal.gif" alt="" width="16" height="15" border="0"></div> </div> <div class="fl10"></div> <div class="clear"></div> </div><!-- indag --> <div class="clear lh10">&nbsp;</div> <div id="sokupp" class="yta2 TB_nb fontS80"> <div class="fl50" id="L-col"> <div class="clear half">&nbsp;</div> <div class="fl25"><h3>S&ouml;kande</h3></div>

Thank you

Improve this question
3
  • 1
    Totally tables. For everything. Just kidding (mostly), but for the data: looks like a table. I would avoid tables for the outer layout though, as much as possible. Doable in any browser that supports at least CSS2 correctly. Commented Mar 22, 2012 at 6:53
  • 1
    Divs for layout, tables for tabular data :) Commented Mar 22, 2012 at 7:11
  • Thanks guys, I've come to use both but I suck at DIVs since I never really understood the rules ie what makes a new line when all we got are DIVs Commented Mar 23, 2012 at 6:59

5 Answers 5

Reset to default
2

I would do with both.

Divs has main wrappers and tables on the inside (on the lines that justify it).

For example the last two lines don't justify the use of tables

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

People recommend div's instead of tables because the tables take time to be loaded in the page as compared to other tags(like div). The table is preferred due to their simplicity and clearness of your code.

Improve this answer

Comments

1

For displaying tabular data, use a table. Use divs for the overall layout.

Improve this answer

Comments

1

Use div and table both.

For the layout, you can use div to put the frames in where they should be. And then you can fill the frames with tables.

The reason is that: div should be used to make the position right and the table should be used to show the data.

Improve this answer

Comments

1

Better use and both. But trying keeping the table tags less as it make the file large hence rendering slow. on the other hand are better then tables but writing CSS is a pain at times.

Using table & div both will also save u from the pain of cross platforms UI issues.

Try to keep the outer structure as table and inner at div.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.