Re: Re: Aligning Columns in HTML Export Tables

[Carsten Dominik <carsten.dominik@gmail.com>]

On Oct 23, 2010, at 9:28 PM, Sebastian Rose wrote:

> Carsten Dominik <carsten.dominik@gmail.com> writes:
>> I have now in the default style:
>>
>> td, th { vertical-align: top;  }
>> th.right  { text-align:right;  }
>> th.left   { text-align:left;   }
>> th.center { text-align:center; }

I am actually using right now:

th.right  { text-align:center;  }
th.left   { text-align:center;   }
th.center { text-align:center; }

because is seem right to me that a table header is centrally
aligned even if the fields are lift or right aligned.
Does anyone know enough rules of style to tell me
if this is the right way, of if header fields are supposed
to have the same alignments as the data fields?

>> td.right  { text-align:right;  }
>> td.left   { text-align:left;   }
>> td.center { text-align:center; }
>>
>> Is there a way to write this more compactly?
>>
>> - Carsten
>
>
> But this is, what I often use:
>
> /* Aligns block elements, too: */
> .right  {margin-left:auto; margin-right:0px;  text-align:right;}
> .left   {margin-left:0px;  margin-right:auto; text-align:left;}
> .center {margin-left:auto; margin-right:auto; text-align:center;}
>
> These are CSS classes I use frequently.  It works for all HTML  
> elements
> AND aligns table to the right in all important browsers.  I first
> thought "OK, we can do this ourselves per stylesheet", but why not  
> offer
> this little goodie out-of-the-box?

So you are suggesting I should add these
to the style sheet.  Sounds fine to me, with the
limitation that it might interfere with commonly
used classes?

I prefer to have at least the th.left/right/center in addition
due to the fact that I think I like centered headers.

>
> Try:
>
>
> (THERE'S A BUG: #+STYLE: lines are not wrapped in <style> tags  
> anymore)
>
>
> --8<---------------cut here---------------start------------->8---
> #+STYLE:  .right  {margin-left:auto; margin-right:0px;  text- 
> align:right;}
> #+STYLE:  .left   {margin-left:0px;  margin-right:auto; text- 
> align:left;}
> #+STYLE:  .center {margin-left:auto; margin-right:auto; text- 
> align:center;}

Did it ever do this?  I don't think so, because the documentation
of the corresponding variables is explicit about the fact that you need
to put the <style> tags.
The reason here is that you might want to put

#+STYLE: <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyles.css 
\">

where automatic <style> tags would be problematic.

I think you can do it like this:

#+STYLE: <style>
#+STYLE:  .right  {margin-left:auto; margin-right:0px;  text- 
align:right;}
#+STYLE:  .left   {margin-left:0px;  margin-right:auto; text- 
align:left;}
#+STYLE:  .center {margin-left:auto; margin-right:auto; text- 
align:center;}
#+STYLE: </style>


- Carsten

>
> * Tables
>
> #+ATTR_HTML: class="left"
> | a | b | c |
> |---+---+---|
> | 1 | 2 | 3 |
>
> #+ATTR_HTML: class="center"
> | a | b | c |
> |---+---+---|
> | 1 | 2 | 3 |
>
> #+ATTR_HTML: class="right"
> | a | b | c |
> |---+---+---|
> | 1 | 2 | 3 |
> --8<---------------cut here---------------end--------------->8---
>
>
>
>  Sebastian