I have problem to create table like image below:
Does anyone know how to create table above using html and css?
I Use that table to create content like this below:
Please guide me and thanks in advance.
-
3In order to avoid a ton of rowspans why don't you just create 2 simple tables side by side?Zoltan Toth– Zoltan Toth2012-07-24 09:59:50 +00:00Commented Jul 24, 2012 at 9:59
-
3Is this for displaying tabular data, or is this a page layout?Richard Ev– Richard Ev2012-07-24 10:21:35 +00:00Commented Jul 24, 2012 at 10:21
-
2You may be interested in this: stackoverflow.com/questions/9205790/…AGuyCalledGerald– AGuyCalledGerald2012-07-24 10:55:34 +00:00Commented Jul 24, 2012 at 10:55
-
1For other complex table layouts, this site has a ton of live examples with the markup required.arttronics– arttronics2012-07-25 03:28:06 +00:00Commented Jul 25, 2012 at 3:28
-
great references but can't solve my problemManellen– Manellen2012-07-25 05:12:38 +00:00Commented Jul 25, 2012 at 5:12
Add a comment
|
2 Answers
rowspan=2 will let you merge cells vertically.
E.g. here is the start of your table:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 TRANSITIONAL//EN"><HTML>
<BODY>
<table border>
<tr>
<td rowspan=2>row 1, column 1</td>
<td>row 1, column 2</td>
<td>row 1, column 3</td>
</tr>
<tr>
<!--td row 2, column 1, covered by row above-->
<td rowspan=2>row 2, column 2</td>
<td>row 2, column 3</td>
</tr>
<tr>
<td>row 3, column 1</td>
<!--td row 3, column 2, covered by row above-->
<td>row 3, column 3</td>
</tr>
</table>
</BODY>
</HTML>
To generate tables like that manually gets messy pretty quickly. You'd be better off with a good layout tool.
Comments
Make a table of 6 rows by 3 columns and make some of the borders invisible, this would be the easiest. I think you can figure the rest of it out by yourself.
