Home/ Questions/Q 7634959
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T07:19:02+00:00

I know how to build table layout with div tags. What I am looking

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0