grid layouts - 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]

Answer

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:

 
  
1
  
1
 
 
  
1
  
1
 

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.