CODEWITHSUNDEEP
htmlcss
pgems hangout
pgems hangout

Reputation: 1

Multi column list html

enter image description here

I would like to make the product list like above, i tried with the following code but its not looks good some one please suggest me in a right way,

.tablep{
	float:left;
	padding-right:150px;
		}
	.bg{
		background-color:grey;
	}

<div class="tablep bg">Code #</div><div class="tablep bg">Product Name</div><div class="tablep bg">Date</div><div class="tablep bg">Amount</div><br>
<div class="tablep">Id1</div><div class="tablep">product1</div><div class="tablep">2015</div><div class="tablep">100USD</div>

How can i achieve as like the pic.Thanks alot

Upvotes: -1

Views: 73

Answers (2)

Sunil Sheokand
Sunil Sheokand

Reputation: 25

You can some changes in your css

.tablep{
	float:left;
	width:20%;
		}
	.bg{
		background-color:grey;
	}
  <div class="tablep bg">Code #</div><div class="tablep bg">Product Name</div><div class="tablep bg">Date</div><div class="tablep bg">Amount</div><br>
    <div class="tablep">Id1</div><div class="tablep">product1</div><div class="tablep">2015</div><div class="tablep">100USD</div>

Upvotes: 1

s1h4d0w
s1h4d0w

Reputation: 781

You should use a table for this kind of data. It's the semantically correct way.

A table matches it's size to all content. If you use divs like in your own code then they will not stretch nicely. I've created a table and gave it a width of 100%. That should give you exactly what you want.

The tr stands for table row, the th stands for table header and the td stands for table cell.

.tablep {
    width: 100%;
}

.tablep th {
  background: lightgrey;
  text-align: left;
}
<table class="tablep" cellspacing="0">
  <tr>
    <th>Code #</th><th>Product Name</th><th>Date</th><th>Amount</th>
  </tr>
  <tr>
    <td>Id1</td><td>product1</td><td>2015</td><td>100USD</td>
  </tr>
  <tr>
    <td>Id1</td><td>product1</td><td>2015</td><td>100USD</td>
  </tr>
  <tr>
    <td>Id1</td><td>product1</td><td>2015</td><td>100USD</td>
  </tr>
</table>

Upvotes: 1

Related Questions