Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Alternative to <table> layout in HTML

Right now I have a webpage set up to be exactly the size of the browser window with a couple overflow:scroll 's in it.

Basically, the page is arranged in two columns and three rows of a table. I would like to not use tables for style/formatting so my question is how would I make this migration.

My page (in a nutshell):

<table>
<tr>
    <td>
        <div style="overflow:scroll;">
            <div>
                stuff1
            </div>
            <div>
                stuff1A
            </div>
        </div>
    </td>
    <td>
        <div style="overflow:scroll;">
            <div>
                stuff2
            </div>
            <div>
                stuff2A
            </div>
        </div>
    </td>
</tr>
<tr>
    <td>
           <input type="submit"><input type="submit"><input type=    "submit">
    </td>
    <td>
           <input type="submit"><input type="submit"><input type="submit">
    </td>
</tr>
<tr>
    <td>
    <textarea>stuff3</textarea></td>
    <td><select multiple>
        </select></td>
</tr>

The problem essentially is, I want to nest <div>s without putting a second nested <div> on a newline:

<div style="overflow:scroll;"> <div>stuff4</div><div>stuff4A</div> </div>
<div style="overflow:scroll;"> <div>stuff5</div><div>stuff5A</div> </div>

I want the above to display two scrollable areas on the same line and I can't use <textarea> because the text needs to be multiple colors (see link provided).

For those interested, the page will eventually be the staff side of a completely in-browser instant message tech support system for a university's CS department.

like image 203
jamesbtate Avatar asked Jan 25 '10 03:01

jamesbtate


People also ask

What can I use instead of a table in HTML?

So, when creating a table, all you need to do is, instead of the HTML 'table' tag, merely use the 'div' tag and add the corresponding CSS to display a table. Here's an example to walk you through the process of creating a table.

How do you display data without a table?

To show a data table, point to Data Table and select the arrow next to it, and then select a display option. To hide the data table, uncheck the Data Table option.

Do people still use tables in HTML?

The table element is still the correct way to provide tabular data in a semantically correct way in HTML. So if you use it semantically correct it is fine and not outdated per se.


1 Answers

Well, the basic way you do this is to break your page up into six <div>s:

<div class="left" id="l1">1</div>
<div class="right" id="r1">2</div>
<div class="left" id="l2">3</div>
<div class="right" id="r2">4</div>
<div class="left" id="l3">5</div>
<div class="right" id="r3">6</div>

Then you write some CSS:

div.left {
    float: left;
    clear: both;
}

And you should get something like:

1   2

3   4

5   6

No nested <div> needed.

like image 89
Mike D. Avatar answered Oct 24 '22 22:10

Mike D.