Need to design html table

[thiyaghuck]

Hi,

I need to design a html dashboard in table exactly same as the attached image. Can someone help me.


Regards,
Thiyaghu CK

[AutumnsDecay]

You won't be able to easily achieve the table headings that you made, but the rest is fairly easy.

For the table headings you'll want to create an image the same width as the table will be. Each column of the table should match the width of the bottom of each header in the image. Getting it to line up perfectly will be a bit of a task.

After that you just do a standard table using HTML's <table> attribute.

[sephedo]

something like this will get you started

<!-- start of table -->
<table>
<!-- table headers -->
<th width="200px"></th><th>Header1</th><th>Header2</th><th>Header3</th><th>Header4</th>
 
<!-- row1 -->
<tr>
<td width="200px" >Row header</td><td>1</td><td>2</td><td>3</td><td>4</td>
</tr>
 
<!-- row2 -->
<tr>
<td width="200px" >Row header</td><td>1</td><td>2</td><td>3</td><td>4</td>
</tr>
 
<!-- end of table -->
</table>

as for the rotated header you can use CSS to rotate the text :)

and the colours and everything can be done with CSS too just set a class for each row / colour

for eg.

th {
background: #ff0000;
}
 
.row1 {
background: #00ff00;
}
 
.row2 {
background: #0000ff;
}

and just change your <tr> tags to <tr class="row1" > or <tr class="row2">