# How to keep ItemSize effect when export to HTML

Here's the simple code

Grid[Table[Item[1,ItemSize->{5,10}],{2},{2}],ItemSize->{5,10},Background->Red]


After saving the output cell as .html file, ItemSize makes no effect.

Here in Mathematica

Here in Html

How to make the ItemSize keep the effect in the .html file?

And I don't mean the gif effect something like what this code done.

Text@Grid[Table[Item[1,ItemSize->{5,10}],{2},{2}],ItemSize->{5,10},Background->Red]

-

In an HTML file, the appearance (and size) of elements is largely controlled by CSS properties and files, and by the users' browsers, which can choose to override the appearance (and the content, too).

Mathematica exports the contents of a grid as an HTML table:

<table class='Output'>
<tr style='vertical-align: baseline;'>
<td style='background-color: #FF0000;text-align: center;'><span>1</span></td>
<td style='background-color: #FF0000;text-align: center;'><span>1</span></td>
</tr>
<tr style='vertical-align: baseline;'>
<td style='background-color: #FF0000;text-align: center;'><span>1</span></td>
<td style='background-color: #FF0000;text-align: center;'><span>1</span></td>
</tr>
</table>


and they've tried to match the colors for you too.

You can attempt to control the size of the table using a CSS file, which you can specify when you export it.

Export["grid.html", grid, "HTML", {"CSS" -> "/tmp/myStyles.css"}]


and the CSS file might contain something like this:

.Output
{
font-family: "Zapfino";
width: 20em;
height: 200px;
}

td, th
{
display: table-cell;
vertical-align: middle;
}


giving you something like this:

which is on the right track at least.

Having said all that, I don't think this approach is very good. But I don't like HTML/CSS anyway, so that might be just me.

-
Yeah, I really don't like edit again and again in the htmls and css file. Things should be better have more tools something like this demonstration demonstrations.wolfram.com/HTMLGeneratorForBasicLayouts – HyperGroups May 22 '13 at 13:18