CODEWITHSUNDEEP
htmlcsscss-tables
expert
expert

Reputation: 30095

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 ?

Upvotes: 5

Views: 59940

Answers (7)

Mahyar Kakaee
Mahyar Kakaee

Reputation: 82

Moe's way is pretty cool but it's not standard. This is the best way.

Use CSS command "float" just like this:

HTML Code:

  .gwt-Label
    {
        float: left;
        width: 50%
        }
<!doctype html>
    <html>
    <head>
        <link href="Style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div style="display: block; ">
        <div style="display: inline; ">
            <div class="gwt-Label" >Name:</div>
            <div class="gwt-Label" >test1</div>
        </div>
        <div style="display: inline; ">
            <div class="gwt-Label" >Address:</div>
            <div class="gwt-Label" >test2</div>
        </div>
    </div>
    </body>
    </html>

Or you can have it all in one place:

<!doctype html>
    <html>
    <head>
    
        <style type="text/css">
            .gwt-Label{
            float: left;
            width: 50%
            }
        </style>
    
    </head>
    <body>
    <div style="display: block; ">
        <div style="display: inline; ">
            <div class="gwt-Label" >Name:</div>
            <div class="gwt-Label" >test1</div>
        </div>
        <div style="display: inline; ">
            <div class="gwt-Label" >Address:</div>
            <div class="gwt-Label" >test2</div>
        </div>
    </div>
    </body>
    </html>

Upvotes: 0

Muder Surti
Muder Surti

Reputation: 11

your solution is as follow :- PLease check it 

 <style type="text/css">
    	.Table
    	{
    		display: table;
    	}
    	.Row
    	{
    		display: table-row;
    	}
    	.Cell
    	{
    		display: table-cell;
    	}
    </style>
 <!doctypehtml>
    <html>
    <body>
    <div class="Row">
    	<div class="Cell">
    		<p>Name:</p>
    	</div>
    	<div class="Cell">
    		<p>Test1</p>
    	</div>
    </div>
    <div class="Row">
    	<div class="Cell">
    		<p>Address:</p>
    	</div>
    	<div class="Cell">
    		<p>Test2</p>
    	</div>
    </div>
    </body>
    </html>

Upvotes: 1

COBOLdinosaur
COBOLdinosaur

Reputation: 294

CSS3 has just the ticket:

.tabl {width:400px;border:1px solid blue;display:table}
.row {height:40px;display:table-row}
.cell {border:1px solid black;display:table-cell}
    <div class="tabl">
	<div class="row">
		<div class="cell"> CELL one</div>
		<div class="cell"> CELL two</div>
		<div class="cell"> CELL three</div></div>
	<div class="row">
		<div class="cell"> CELL four
		</div><div class="cell"> CELL five</div>
		<div class="cell"> 
			<div class="tabl">
				<div class="row">
					<div class="cell">CELL 6A</div>
					<div class="cell">CELL6B</div>
				</div>
			</div>
		</div>
	</div>
</div>

That can then be allied to a structure that looks like a table In this case I've included a nested table:

If you want you can probably leave out the outside wrapper, unlike a real table the rows and cells seem not to need it. Unfortunately this only works in modern browsers that support CSS3 that leaves out IE including IE9.

Upvotes: 2

neurotik
neurotik

Reputation: 1419

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>

Upvotes: 13

Homer6
Homer6

Reputation: 15159

HTML tables are appropriate for representing tabular data. Just don't use tables for general layout. Tables are still better for tabular data though.

UPDATE: Going forward, you may want to consult the CSS3 Grid Layout specification: http://www.w3.org/TR/css3-grid-layout/

But as is, if you reeeeeeally want to make it work for whatever reason, I'd set all columns as fixed width, float left and clear on the first column. If you want different widths for different columns, you can make specific classes for those columns and set a specific width. But, if there's user data in your table, you have to make sure overflow:hidden is on, or it'll break your table.

I've pasted the code in here, but I've also created a jsfiddle link.

Here's the html:

<div class="table">

    <div class="column first">Name:</div>
    <div class="column">test1</div>

    <div class="column first">Address:</div>
    <div class="column">test2</div>

</div>

And the styles:

.table .column{
   width: 100px;
   float: left;
}

.table .column.first{
   clear: left;   
}

However, you're going to run into problems as the text inside the table changes. It's not going to act like a table. For example, when a cell's text wraps to the next line, it's not going to adjust the height of all the cells in that row, as you would expect a cell to do. Hence the overflow: hidden or just use an HTML table.

Hope that helps...

Upvotes: 14

Pavan Kondapuram
Pavan Kondapuram

Reputation: 31

If you are looking to generate dynamic tabular structure, try using jqGrid (demo)

Or if your purpose is different and still wanna go with div? Try this..

use float:left; instead display:inline. Float shrinks the div to its content size, letting space for other elements. This makes other elements accommodate beside floated element.

Corrected code:

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

Upvotes: 0

Moe Sweet
Moe Sweet

Reputation: 3721

    <div style="display: block; ">
        <div style="float:left">
            <div class="gwt-Label" >Name:</div>
            <div class="gwt-Label" >Address:</div>
        </div>
        <div style="float:left">
            <div class="gwt-Label" >test1</div>
            <div class="gwt-Label" >test2</div>
        </div>
<div style="clear:both"></div>
    </div>

Upvotes: 1

Related Questions