CODEWITHSUNDEEP
htmltabular
ring bearer
ring bearer

Reputation: 20783

How to design an html table with multiple rows against a row using <div> tag

I know how to build table layout with div tags.

What I am looking for is an efficient way to build table with multiple rows against a single row using <div> tags as opposed to <table> tags as a large amount of data is going to be displayed.

Here is what I am looking to achieve:

enter image description here

Upvotes: 1

Views: 2213

Answers (2)

Jere
Jere

Reputation: 3397

I'm going to agree with everyone else and say that tables are almost always better for tabular data. Specifically, I've never heard the argument (nor does it make much sense) that divs are preferable for a large amount of data.

However, if you need to accomplish something like this with pure divs, it's fairly simple as long as the rows have fixed heights. Simply organize the "table" into column divs. Then assign each inner cell a height, either the height of a row or half the height.

http://jsfiddle.net/Wn56N/1/

Upvotes: 1

Paxwell
Paxwell

Reputation: 758

You don't need divs. Just use the rowspan property: Here is a pretty styled table to get you started:

<html>
<head>
<style type="text/css">
#customers
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:100%;
border-collapse:collapse;
}
#customers td, #customers th 
{
font-size:1em;
border:1px solid #98bf21;
padding:3px 7px 2px 7px;
}
#customers th 
{
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#A7C942;
color:#ffffff;
}
#customers tr.alt td 
{
color:#000000;
background-color:#EAF2D3;
}
</style>
</head>

<body>
<table id="customers">
<tr>
  <th>Company</th>
  <th>Contact</th>
  <th>Country</th>
</tr>
<tr>
<td rowspan="2">Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr class="alt">
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</tr>
</table>
</body>
</html>

Upvotes: 2

Related Questions