Search code examples
htmlcsscss-tables

How to create a table using div tags?


This question has actually came from my experiments with GWT framework but I decided to simplify the question.

I'm trying to replace table tag with divs. How can I horizontally align two DIV tags that contain two vertically aligned DIV tags ?

Here is what I have:

<!doctype html>
<html>
<body>
<div style="display: block; ">
    <div style="display: inline; ">
        <div class="gwt-Label" >Name:</div>
        <div class="gwt-Label" >Address:</div>
    </div>
    <div style="display: inline; ">
        <div class="gwt-Label" >test1</div>
        <div class="gwt-Label" >test2</div>
    </div>
</div>
</body>
</html>

It's rendered in my Chrome 15.0.874.106 m as:

Name:
Address:
test1
test2

where I expected it to be:

Name:    test1
Address: test2

Could you please help me ?


Solution

  • I think for the example you have an actual table would be more appropriate, however; you could also do something like this:

    <body>
    	<div style="display: table;">
    		<div style="display: table-row;">
    			<div style="display: table-cell;">Name:</div>
    			<div style="display: table-cell;">test1</div>
    		</div>
    		<div style="display: table-row;">
    			<div style="display: table-cell;">Address:</div>
    			<div style="display: table-cell;">test2</div>
    		</div>
    	</div>
    </body>