2
$\begingroup$

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

enter image description here

Here in Html

enter image description here

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]
$\endgroup$
3
$\begingroup$

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:

image

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.

$\endgroup$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.