Table column width and HTML export

Table column width and HTML export

[Martin Dalgaard Villumsen]

[-- Attachment #1: Type: text/plain, Size: 401 bytes --]

How do I control the column width when exporting a table to HTML?

I know how to control the width of the table, but not the width of its columns. For example, I want the width of column A to be 2 cm and the width of B to be 4 cm:

|  A |  B |
|----+----|
| 11 | 12 |
| 21 | 22 |

Relative settings are also appreciated, A 33% and B 67% of total table width.

Thanks for reading, Martin


[-- Attachment #2: Type: text/html, Size: 3286 bytes --]

Re: Table column width and HTML export

[Eric S Fraga]

On Tuesday, 18 Sep 2018 at 07:37, Martin Dalgaard Villumsen wrote:
> How do I control the column width when exporting a table to HTML?

Looking at the code (ox-html.el), it doesn't look like this is possible.  Maybe somebody can prove me wrong, however.  The code I see allows for setting the alignment of columns but not the width.
-- 
Eric S Fraga via Emacs 27.0.50, Org release_9.1.13-753-g2ec5d3

Re: Table column width and HTML export

[Kaushal Modi]

[-- Attachment #1: Type: text/plain, Size: 1158 bytes --]

On Tue, Sep 18, 2018, 3:38 AM Martin Dalgaard Villumsen <
mvillumsen@health.sdu.dk> wrote:

> How do I control the column width when exporting a table to HTML?
>
>
>
> I know how to control the width of the table, but not the width of its
> columns. For example, I want the width of column A to be 2 cm and the width
> of B to be 4 cm:
>
>
>
> |  A |  B |
>
> |----+----|
>
> | 11 | 12 |
>
> | 21 | 22 |
>
>
>
> Relative settings are also appreciated, A 33% and B 67% of total table
> width.
>
Hello,

This needs to be solved using CSS. See an example here:
https://stackoverflow.com/questions/6253963/table-with-table-layout-fixed-and-how-to-make-one-column-wider

In that two solutions are suggested in the selected answer. You should be
able to implement the first way using the "td+td" CSS rule.

For the second way using the "col" tag, I don't have the computer
accessible right now, to check if ox-html can insert that tag. Even if it
did add that tag, you would need to specify the class string for each
column, and then use CSS to set the width of each column class.

Right now, the first method seems to be the best?/fastest/easiest way
forward.

>

[-- Attachment #2: Type: text/html, Size: 2997 bytes --]

Re: Table column width and HTML export

[Martin Dalgaard Villumsen]

[-- Attachment #1: Type: text/plain, Size: 1834 bytes --]

I am not interested in editing the exported HTML file (conflicts the point of using org-mode)

I can add a class to the <table> tag with

#+ATTR_HTML: :class my-table

But I don’t know how to add a new class to <col> in org-mode; or how to define a custom column (one that is now <r>, <l>, <c>).

No point in CSS-restyling default class="org-center", class="org-left", etc.  … this would affect columns in other tables


/Martin

From: Kaushal Modi [mailto:kaushal.modi@gmail.com]
Sent: 18. september 2018 12:31
To: Martin Dalgaard Villumsen <mvillumsen@health.sdu.dk>
Cc: Emacs-orgmode@gnu.org
Subject: Re: [O] Table column width and HTML export

On Tue, Sep 18, 2018, 3:38 AM Martin Dalgaard Villumsen <mvillumsen@health.sdu.dk<mailto:mvillumsen@health.sdu.dk>> wrote:
How do I control the column width when exporting a table to HTML?

I know how to control the width of the table, but not the width of its columns. For example, I want the width of column A to be 2 cm and the width of B to be 4 cm:

|  A |  B |
|----+----|
| 11 | 12 |
| 21 | 22 |

Relative settings are also appreciated, A 33% and B 67% of total table width.
Hello,

This needs to be solved using CSS. See an example here: https://stackoverflow.com/questions/6253963/table-with-table-layout-fixed-and-how-to-make-one-column-wider

In that two solutions are suggested in the selected answer. You should be able to implement the first way using the "td+td" CSS rule.

For the second way using the "col" tag, I don't have the computer accessible right now, to check if ox-html can insert that tag. Even if it did add that tag, you would need to specify the class string for each column, and then use CSS to set the width of each column class.

Right now, the first method seems to be the best?/fastest/easiest way forward.

[-- Attachment #2: Type: text/html, Size: 7654 bytes --]

Re: Table column width and HTML export

[Kaushal Modi]

[-- Attachment #1: Type: text/plain, Size: 1315 bytes --]

Hello,

There seems to be quite a bit of confusion.

On Tue, Sep 18, 2018, 6:51 AM Martin Dalgaard Villumsen <
mvillumsen@health.sdu.dk> wrote:

> I am not interested in editing the exported HTML file (conflicts the point
> of using org-mode)
>
I did not say that HTML should be edited manually. I said that ox-html
probably needs an update that inserts the col tag with user-specified
col-classes.

>  I can add a class to the <table> tag with
>
> #+ATTR_HTML: :class my-table
>

Correct. That class won't help here. You need a class that scopes the
individual columns.

>  But I don’t know how to add a new class to <col> in org-mode; or how to
> define a custom column (one that is now <r>, <l>, <c>).
>
Right, that needs to be investigated. Most likely, at the moment, we cannot
set individual classes for each column.

> No point in CSS-restyling default class="org-center", class="org-left",
> etc.  … this would affect columns in other tables
>
That's a CSS problem. You can set a unique class for a table using the
attr_html syntax you showed above and then set CSS rules only for that
table using ".my-table td+td" and so on.

The org-* classes you mentioned can be easily overridden or used along with
the new classes, based on how the CSS rules are written.

>

[-- Attachment #2: Type: text/html, Size: 3579 bytes --]

Table column width and HTML export

[Martin Dalgaard Villumsen]

[-- Attachment #1: Type: text/plain, Size: 1815 bytes --]

>The org-* classes you mentioned can be easily overridden or used along with > >the new classes, based on how the CSS rules are written.

How do you in org-mode override/identify the column-class for a single column when you have multiple columns of the same type in the same table?

/Martin

From: Kaushal Modi [mailto:kaushal.modi@gmail.com]
Sent: 18. september 2018 13:27
To: Martin Dalgaard Villumsen <mvillumsen@health.sdu.dk>
Cc: Emacs-orgmode@gnu.org
Subject: Re: [O] Table column width and HTML export

Hello,

There seems to be quite a bit of confusion.

On Tue, Sep 18, 2018, 6:51 AM Martin Dalgaard Villumsen <mvillumsen@health.sdu.dk<mailto:mvillumsen@health.sdu.dk>> wrote:
I am not interested in editing the exported HTML file (conflicts the point of using org-mode)
I did not say that HTML should be edited manually. I said that ox-html probably needs an update that inserts the col tag with user-specified col-classes.
 I can add a class to the <table> tag with
#+ATTR_HTML: :class my-table

Correct. That class won't help here. You need a class that scopes the individual columns.
 But I don’t know how to add a new class to <col> in org-mode; or how to define a custom column (one that is now <r>, <l>, <c>).
Right, that needs to be investigated. Most likely, at the moment, we cannot set individual classes for each column.
No point in CSS-restyling default class="org-center", class="org-left", etc.  … this would affect columns in other tables
That's a CSS problem. You can set a unique class for a table using the attr_html syntax you showed above and then set CSS rules only for that table using ".my-table td+td" and so on.

The org-* classes you mentioned can be easily overridden or used along with the new classes, based on how the CSS rules are written.

[-- Attachment #2: Type: text/html, Size: 6710 bytes --]

Re: Table column width and HTML export

[Kaushal Modi]

[-- Attachment #1.1: Type: text/plain, Size: 1944 bytes --]

On Tue, Sep 18, 2018 at 7:35 AM Martin Dalgaard Villumsen <
mvillumsen@health.sdu.dk> wrote:
>
> How do you in org-mode override/identify the column-class for a single
column when you have multiple columns of the same type in the same table?

As I said, you can do everything using CSS and the existing ox-html version.

Here's an example:

=====
#+title: Specify widths different for different table columns in HTML export
#+author: Kaushal Modi

#+begin_export html
<style>
/* First column */
table.foo td:first-child {
  width: 200px;
}
/* Second column */
table.foo td:nth-child(2) {
  width: auto;
}
/* Last column */
table.foo td:last-child {
  width: 400px;
}
</style>
#+end_export

The column widths in below table will stay at default.

|----------+----------+----------|
| Header 1 | Header 2 | Header 3 |
|----------+----------+----------|
| abc      | def      | ghi      |
| jkl      | mno      | pqr      |
| stu      | vwx      | yz       |
|----------+----------+----------|

Below, the left-most column will be 200px wide and the right-most will
be 400px wide. The center column will stay at default width.

#+attr_html: :class foo
|----------+----------+----------|
| Header 1 | Header 2 | Header 3 |
|----------+----------+----------|
| abc      | def      | ghi      |
| jkl      | mno      | pqr      |
| stu      | vwx      | yz       |
|----------+----------+----------|
* CSS References
- https://stackoverflow.com/a/6254367/1219634
- [[https://www.w3schools.com/cssref/sel_element_pluss.asp][CSS --
/element+element/ selector]]
- [[https://www.w3schools.com/cssref/sel_firstchild.asp][CSS --
~:first-child~]]
- [[https://www.w3schools.com/cssref/sel_last-child.asp][CSS --
~:last-child~]]
- [[https://www.w3schools.com/cssref/sel_nth-child.asp][CSS --
~:nth-child()~]]
- [[https://www.w3schools.com/cssref/sel_nth-last-child.asp][CSS --
~:nth-last-child()~]]
=====

Screenshot (see below/attached):

[image: image.png]

[-- Attachment #1.2: Type: text/html, Size: 2786 bytes --]

[-- Attachment #2: image.png --]
[-- Type: image/png, Size: 57806 bytes --]

Re: Table column width and HTML export

[Martin Dalgaard Villumsen]

[-- Attachment #1.1: Type: text/plain, Size: 2621 bytes --]

Thanks for sharing

/Martin

From: Kaushal Modi [mailto:kaushal.modi@gmail.com]
Sent: 18. september 2018 20:25
To: Martin Dalgaard Villumsen <mvillumsen@health.sdu.dk>
Cc: emacs-org list <Emacs-orgmode@gnu.org>
Subject: Re: [O] Table column width and HTML export

On Tue, Sep 18, 2018 at 7:35 AM Martin Dalgaard Villumsen <mvillumsen@health.sdu.dk<mailto:mvillumsen@health.sdu.dk>> wrote:
>
> How do you in org-mode override/identify the column-class for a single column when you have multiple columns of the same type in the same table?

As I said, you can do everything using CSS and the existing ox-html version.

Here's an example:

=====
#+title: Specify widths different for different table columns in HTML export
#+author: Kaushal Modi

#+begin_export html
<style>
/* First column */
table.foo td:first-child {
  width: 200px;
}
/* Second column */
table.foo td:nth-child(2) {
  width: auto;
}
/* Last column */
table.foo td:last-child {
  width: 400px;
}
</style>
#+end_export

The column widths in below table will stay at default.

|----------+----------+----------|
| Header 1 | Header 2 | Header 3 |
|----------+----------+----------|
| abc      | def      | ghi      |
| jkl      | mno      | pqr      |
| stu      | vwx      | yz       |
|----------+----------+----------|

Below, the left-most column will be 200px wide and the right-most will
be 400px wide. The center column will stay at default width.

#+attr_html: :class foo
|----------+----------+----------|
| Header 1 | Header 2 | Header 3 |
|----------+----------+----------|
| abc      | def      | ghi      |
| jkl      | mno      | pqr      |
| stu      | vwx      | yz       |
|----------+----------+----------|
* CSS References
- https://stackoverflow.com/a/6254367/1219634
- [[https://www.w3schools.com/cssref/sel_element_pluss.asp][CSS<https://www.w3schools.com/cssref/sel_element_pluss.asp%5d%5bCSS> -- /element+element/ selector]]
- [[https://www.w3schools.com/cssref/sel_firstchild.asp][CSS<https://www.w3schools.com/cssref/sel_firstchild.asp%5d%5bCSS> -- ~:first-child~]]
- [[https://www.w3schools.com/cssref/sel_last-child.asp][CSS<https://www.w3schools.com/cssref/sel_last-child.asp%5d%5bCSS> -- ~:last-child~]]
- [[https://www.w3schools.com/cssref/sel_nth-child.asp][CSS<https://www.w3schools.com/cssref/sel_nth-child.asp%5d%5bCSS> -- ~:nth-child()~]]
- [[https://www.w3schools.com/cssref/sel_nth-last-child.asp][CSS<https://www.w3schools.com/cssref/sel_nth-last-child.asp%5d%5bCSS> -- ~:nth-last-child()~]]
=====

Screenshot (see below/attached):

[image.png]

[-- Attachment #1.2: Type: text/html, Size: 6258 bytes --]

[-- Attachment #2: image001.jpg --]
[-- Type: image/jpeg, Size: 8640 bytes --]