I want to create an html table in the format below.
I am not able to find a way to do it. Can anyone help me?
- Merge cell with rowspan attribute. Vertical text: stackoverflow.com/questions/3225572/…nhahtdh– nhahtdh2012-12-03 09:45:56 +00:00Commented Dec 3, 2012 at 9:45
- Read about Table "Row span" and "column span", it might help you.Shahzeb Khan– Shahzeb Khan2012-12-03 09:48:45 +00:00Commented Dec 3, 2012 at 9:48
Add a comment |
2 Answers
I don't think you could have a fully cross-browser solution, anyway try this:
.verticalText { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=3); }<table border="1"> <tbody> <tr> <td rowspan="4"> <div class="verticalText">one</div> </td> <td>One</td> <td>Other</td> </tr> <tr> <td>One</td> <td>Other</td> </tr> <tr> <td>One</td> <td>Other</td> </tr> <tr> <td>One</td> <td>Other</td> </tr> </tbody> </table>In the HTML part, you use the attribute "rowspan" to tell the cell (td) to span over n rows; you have to remove the relative cell declaration in the subsequent "spanned" cell. The same works horizontally with the attribute "colspan". Default value of such attributes is 1, and it's implicit.
The CSS part try to render the text vertically as seen in your image, but it's not a CSS standard yet, so you have to try it in various browser. If you can't achieve fully compatibility, you might be forced to render that text by image, if text is not dynamic.
Edited HTML to include a container to text as indicated in comment.
4 Comments
nhahtdh
The text in the verticalText should be wrapped in a span, and define the CSS for the span inside (with
display:block). Otherwise, with the current code, there might be weird effect since the whole cell is rotated (not just the text).
vaibhav shah
I have tried this one but vertical column never fits the size of other columns
LittleSweetSeas
What do you mean by size? The height of the first td should be fine, maybe you have to adjust the text-align and vertical-align properties
vaibhav shah
In image you can see that height of first column is equal to sum of heights of four column of 2nd column. But if i do using above code then height of 1st column is much bigger than other column
