How to align cell vertically with RowSpan>1

Question

I want to have this enter image description here , but instead have this . Please note, when I change VerticalAlign.Middle to VerticalAlign.Top it actually works as expected. Please see below code that I am trying:

   // I assume that table table is already created and well-defined  
   // Create a new row

    TableRow tRow = new TableRow();

    tRow.HorizontalAlign = HorizontalAlign.Center;

    // add the row to the table

    table.Rows.Add(tRow);

    // Create a new cell

    TableCell tCell = new TableCell();

    tCell.VerticalAlign = VerticalAlign.Middle; // Want to get it in the middle of two merged rows

    tCell.RowSpan = 2;

    tCell.Text = "England";

    tCell.Font.Bold = true;

    tRow.Cells.Add(tCell);

    // Create new cell

    tCell = new TableCell();

    tCell.Text = "2010";

    tCell.Font.Bold = true;

    tRow.Cells.Add(tCell);

    // Create new row

    tRow = new TableRow();

    // add the row to the table

    table.Rows.Add(tRow);

    // Create new cell

    tCell = new TableCell();

    tCell.Text = "2011";

    tCell.Font.Bold = true;

    tRow.Cells.Add(tCell);

Update: Please see extra code below. I don't have html code as such, but I looked at sw.ToString() and formatting looks right but still excel file does not seem to be rightly formatted. My browser is IE but I think it does not matter. I tried tCell.CssClass = "className"; result is the same.

public static void Comparison_Report(string fileName)
{
HttpContext.Current.Response.Clear();
HttpContext.Current.Response.AddHeader("content-disposition", string.Format("attachment; filename={0}", fileName));
HttpContext.Current.Response.ContentType = "application/ms-excel";
using (StringWriter sw = new StringWriter())
{
using (HtmlTextWriter htw = new HtmlTextWriter(sw))
{
// Create a table to contain the grid
Table table = new Table();

///----- Original code goes here----

// render the table into the htmlwriter
table.RenderControl(htw);
// render the htmlwriter into the response  
HttpContext.Current.Response.Write(sw.ToString());
HttpContext.Current.Response.End();
}

}

}

It works for me(see picture [here](http://www.bilder-hochladen.net/files/4709-oc-22ac.png)), so there must be something else messing up your html. — Tim Schmelter, Nov 30 '11 at 13:03
Wow, that was quick! It also works fine with VerticalAlign.Top for me, but it does not VerticalAlign.Middle. That's why I ask this as a question. This is nothing else in my file. I found your comment more valuable than an answer! — Pavel Nefyodov, Nov 30 '11 at 13:13
Does this work in any other browser, what browser have you tested it with? Post the generated HTML as well. — Tim Schmelter, Nov 30 '11 at 13:32
As a side note, do you have considered to create a real excelsheet instead of a HTML-Table? It's [very simple with EPPlus](http://stackoverflow.com/questions/7589768/exporting-data-to-excel-in-vb-net/7590023#7590023). — Tim Schmelter, Nov 30 '11 at 14:07
No, it [creates a HTML-Table](http://stackoverflow.com/questions/5258224/rendering-of-asp-net-controls/5259082#5259082) that can be opened and interpreted by excel. But it **is** pure html. — Tim Schmelter, Nov 30 '11 at 15:04
(change the file-extension to `txt`, open it manually and you'll see it) — Tim Schmelter, Nov 30 '11 at 15:10
As I said in update I looked at sw.ToString() (pure html) and it looks fine. But somehow finally in Excel it does not look formatted properly. — Pavel Nefyodov, Nov 30 '11 at 15:40

Dave Walker · Answer 1 · 2011-11-30T13:20:06.310

Do this in CSS please!! Set a class on the cell that you want to have 'England' in it and target that class.

Code

tCell.Text = "England";
tCell.CssClass = "className";

Css

td.className {
   vertical-align:middle;
}

Edit Ok so by popular demand an explanation for why to use CSS here rather than set this in the creation of the table cell.

What you gain from using a seperate stylesheet is a whole heap of power and control on how this element is going to look on the client. When you set this in code you are explicitly saying it should only be like this - however when you set it in CSS and use a stylesheet you can do things like target different platforms, change the position easily, add extra elements etc. This is the old discussion between having inline style and pulling the style out into a separate sheet. I think this topic is quite well discussed on the web if you care to read more about it...

Edit 2 I just tried your code as you pasted it and it worked fine for me - the cell was middle aligned. I would use Firebug to try figure out if there are some other styles that are acting on that table cell to make it have this behavior.

This neither solves the OP's issue nor explains **why** he should use CSS instead of his compiled inline version. — Tim Schmelter, Nov 30 '11 at 13:07
Not exactly a solution of my problem, but quite close. Voted +1 as helpful. — Pavel Nefyodov, Nov 30 '11 at 16:42

score 2 · Accepted Answer · edited May 23 '17 at 11:47

2

Finally i've tested it by myself. It seems not to work in Excel if you use valign="middle" on your table-cell. You must use CSS.

So instead of

tCell.VerticalAlign = VerticalAlign.Middle

do

tCell.Style.Add("vertical-align", "middle")

That will align the text correctly in excel. Excel itself uses css-classes if you export it from excel to html.

But repeating my comment, i would recommend to generate a real excel file instead of creating html that might be openened and interpreted correctly. It's very simple with EPPlus: Exporting data to excel

edited May 23 '17 at 11:47

Community

1
1

answered Nov 30 '11 at 16:28

Tim Schmelter

450,073
74
686
939

Just checked it. It works like a charm! I am actually not exporting from Excel to HTML, but other way round HTML->Excel. So what's the difference between my approach and creating "real" Excel file? – Pavel Nefyodov Nov 30 '11 at 16:41
@Pavel: I've only mentioned how excel itself exports to html because that was the way i've checked what excel can understand and what not. The difference between yours and an excel file is that you're creating broken html(there are not even HTML/Head/Body-tags at all). A "real" excel file does not only have the extension `xls` or `xlsx` but is a hidden html-file. It is a binary. Here are some pros and cons: http://stackoverflow.com/questions/150339/generating-an-excel-file-in-asp-net – Tim Schmelter Nov 30 '11 at 17:17

score 0 · Answer 3 · answered Jun 05 '15 at 03:37

0

<td   align='left' valign='middle' ></td>

Not working in exporting excel file from code behind.so i search in internet and found this example.

td.className {
   vertical-align:middle;
}

this save my time. Thanks

answered Jun 05 '15 at 03:37

mrtwin

1

How to align cell vertically with RowSpan>1

3 Answers3