Table with vertical headers

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
7 messages Options
Reply | Threaded
Open this post in threaded view
|

Table with vertical headers

davidgamba
Hi guys,

I just some help on how to create a table with vertical headers. I reviewed the table documentation and couldn't find a way.

For now I will make the vertical header bold but it is not what I hope to have.

Header 1 data data data
Header 2 data data data
Header 3 data data data

I appreciate any help, if it is not possible please let me know to create a feature request ( I checked and there is no feature request open on the issue so hopefully it is already implemented).

--David
Reply | Threaded
Open this post in threaded view
|

Re: Table with vertical headers

graphitefriction
Administrator
Hi David,

To create a header column, you'll want to use the header column specifier.

Using your example, the syntax would look like this:

[cols="h,1,1,1"]
|===
|Header  |data |data |data 
|Header  |data |data |data 
|Header  |data |data |data 
|===

The table has four columns, and the `h` indicates that the first column of the table should use the header style. 

You can find more information about column specifier styles towards the end of the column specifiers section here: http://asciidoctor.org/docs/user-manual/#column-specifiers

If this wasn't what you were trying to do, let me know.

Cheers,

Sarah
Reply | Threaded
Open this post in threaded view
|

Re: Table with vertical headers

mojavelinux
Administrator
Sarah explains it perfectly. I'll add one small detail. The number 1 is implied when a number is not specified in the spec for a given column. So you could also write the col spec as:

[cols="1h,1,1,1"]

You can shorten it further by using the '*' operator, which repeats a style across a number of columns.

[cols="1h,3*"]

That says make 4 columns, the first a header and three more with no special formatting. You'll often use the '*' operator when you want equal column widths. It's when you need to customize the width distribution that you'll go back to using a spec for each column. Here we have alternating thin and wide columns.

[cols="1h,2,1,2"]

Cheers,

-Dan


On Wed, Oct 23, 2013 at 10:48 AM, graphitefriction [via Asciidoctor :: Discussion] <[hidden email]> wrote:
Hi David,

To create a header column, you'll want to use the header column specifier.

Using your example, the syntax would look like this:

[cols="h,1,1,1"]
|===
|Header  |data |data |data 
|Header  |data |data |data 
|Header  |data |data |data 
|===

The table has four columns, and the `h` indicates that the first column of the table should use the header style. 

You can find more information about column specifier styles towards the end of the column specifiers section here: http://asciidoctor.org/docs/user-manual/#column-specifiers

If this wasn't what you were trying to do, let me know.

Cheers,

Sarah



If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/Table-with-vertical-headers-tp853p854.html
To start a new topic under Asciidoctor :: Discussion, email [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML



--
Reply | Threaded
Open this post in threaded view
|

Re: Table with vertical headers

davidgamba
In reply to this post by graphitefriction
Hi Sarah,

Thanks for showing me the h modifier for the column. I totally missed it. However, it adds the class="header" (in the wrong place) instead of actually modifying the html with the ≶th> element.

.What actually gets rendered

≶table class="tableblock frame-all grid-all" style="width:100%; ">
  ≶colgroup>
    ≶col style="width:25%;">
    ≶col style="width:25%;">·
    ≶col style="width:25%;">·
    ≶col style="width:25%;">·
  ≶/colgroup>
  ≶tbody>
    ≶tr>
      ≶td class="tableblock halign-left valign-top">≶p class="tableblock header">Header≶/p>≶/td>
      ≶td class="tableblock halign-left valign-top">≶p class="tableblock">data≶/p>≶/td>
      ≶td class="tableblock halign-left valign-top">≶p class="tableblock">data≶/p>≶/td>
      ≶td class="tableblock halign-left valign-top">≶p class="tableblock">data≶/p>≶/td>
    ≶/tr>
    ≶tr>
      ≶td class="tableblock halign-left valign-top">≶p class="tableblock header">Header≶/p>≶/td>
      ≶td class="tableblock halign-left valign-top">≶p class="tableblock">data≶/p>≶/td>
      ≶td class="tableblock halign-left valign-top">≶p class="tableblock">data≶/p>≶/td>
      ≶td class="tableblock halign-left valign-top">≶p class="tableblock">data≶/p>≶/td>
    ≶/tr>
    ≶tr>
      ≶td class="tableblock halign-left valign-top">≶p class="tableblock header">Header≶/p>≶/td>
      ≶td class="tableblock halign-left valign-top">≶p class="tableblock">data≶/p>≶/td>
      ≶td class="tableblock halign-left valign-top">≶p class="tableblock">data≶/p>≶/td>
      ≶td class="tableblock halign-left valign-top">≶p class="tableblock">data≶/p>≶/td>
    ≶/tr>
  ≶/tbody>
≶/table>

.Where the class header should be
≶table class="tableblock frame-all grid-all" style="width:100%; ">
  ≶colgroup>
    ≶col style="width:25%;">
    ≶col style="width:25%;">·
    ≶col style="width:25%;">·
    ≶col style="width:25%;">·
  ≶/colgroup>
  ≶tbody>
    ≶tr>
      ≶td class="tableblock halign-left valign-top header">≶p class="tableblock">Header≶/p>≶/td>
      ≶td class="tableblock halign-left valign-top">≶p class="tableblock">data≶/p>≶/td>
...

.What I would really like to see
≶table class="tableblock frame-all grid-all" style="width:100%; ">
  ≶colgroup>
    ≶col style="width:25%;">
    ≶col style="width:25%;">·
    ≶col style="width:25%;">·
    ≶col style="width:25%;">·
  ≶/colgroup>
  ≶tbody>
    ≶tr>
      ≶th class="tableblock halign-left valign-top">≶p class="tableblock">Header≶/p>≶/th>
      ≶td class="tableblock halign-left valign-top">≶p class="tableblock">data≶/p>≶/td>
...

I am using
Asciidoctor 0.1.4 [http://asciidoctor.org]

Can you reproduce? Should I create a issue on github?

--David
Reply | Threaded
Open this post in threaded view
|

Re: Table with vertical headers

graphitefriction
Administrator
Hi David,

Yes, this is the same raw HTML I get. And, wow, it's...ackward.

Techinically, the HTML output we're getting is the expected output because it matches the python AsciiDoc processor's output.
However, I agree with you, and I'd also really like Asciidoctor to output the correct/modern `<th class>` tag.
This upgrade will also enable AsciiDoc tables to display correctly on Github.

So, when you get a chance, please do create an issue on GitHub.

Cheers,

Sarah


On Thu, Oct 24, 2013 at 9:35 AM, davidgamba [via Asciidoctor :: Discussion] <[hidden email]> wrote:
Hi Sarah,

Thanks for showing me the h modifier for the column. I totally missed it. However, it adds the class="header" (in the wrong place) instead of actually modifying the html with the
 element.

.What actually gets rendered

&lg;table class="tableblock frame-all grid-all" style="width:100%; ">
  &lg;colgroup>
    &lg;col style="width:25%;">
    &lg;col style="width:25%;">·
    &lg;col style="width:25%;">·
    &lg;col style="width:25%;">·
  &lg;/colgroup>
  &lg;tbody>
    &lg;tr>
      &lg;td class="tableblock halign-left valign-top">&lg;p class="tableblock header">Header&lg;/p>&lg;/td>
      &lg;td class="tableblock halign-left valign-top">&lg;p class="tableblock">data&lg;/p>&lg;/td>
      &lg;td class="tableblock halign-left valign-top">&lg;p class="tableblock">data&lg;/p>&lg;/td>
      &lg;td class="tableblock halign-left valign-top">&lg;p class="tableblock">data&lg;/p>&lg;/td>
    &lg;/tr>
    &lg;tr>
      &lg;td class="tableblock halign-left valign-top">&lg;p class="tableblock header">Header&lg;/p>&lg;/td>
      &lg;td class="tableblock halign-left valign-top">&lg;p class="tableblock">data&lg;/p>&lg;/td>
      &lg;td class="tableblock halign-left valign-top">&lg;p class="tableblock">data&lg;/p>&lg;/td>
      &lg;td class="tableblock halign-left valign-top">&lg;p class="tableblock">data&lg;/p>&lg;/td>
    &lg;/tr>
    &lg;tr>
      &lg;td class="tableblock halign-left valign-top">&lg;p class="tableblock header">Header&lg;/p>&lg;/td>
      &lg;td class="tableblock halign-left valign-top">&lg;p class="tableblock">data&lg;/p>&lg;/td>
      &lg;td class="tableblock halign-left valign-top">&lg;p class="tableblock">data&lg;/p>&lg;/td>
      &lg;td class="tableblock halign-left valign-top">&lg;p class="tableblock">data&lg;/p>&lg;/td>
    &lg;/tr>
  &lg;/tbody>
&lg;/table>

.Where the class header should be
&lg;table class="tableblock frame-all grid-all" style="width:100%; ">
  &lg;colgroup>
    &lg;col style="width:25%;">
    &lg;col style="width:25%;">·
    &lg;col style="width:25%;">·
    &lg;col style="width:25%;">·
  &lg;/colgroup>
  &lg;tbody>
    &lg;tr>
      &lg;td class="tableblock halign-left valign-top header">&lg;p class="tableblock">Header&lg;/p>&lg;/td>
      &lg;td class="tableblock halign-left valign-top">&lg;p class="tableblock">data&lg;/p>&lg;/td>
...

.What I would really like to see
&lg;table class="tableblock frame-all grid-all" style="width:100%; ">
  &lg;colgroup>
    &lg;col style="width:25%;">
    &lg;col style="width:25%;">·
    &lg;col style="width:25%;">·
    &lg;col style="width:25%;">·
  &lg;/colgroup>
  &lg;tbody>
    &lg;tr>
      &lg;th class="tableblock halign-left valign-top">&lg;p class="tableblock">Header&lg;/p>&lg;/th>
      &lg;td class="tableblock halign-left valign-top">&lg;p class="tableblock">data&lg;/p>&lg;/td>
...

I am using
Asciidoctor 0.1.4 [http://asciidoctor.org]

Can you reproduce? Should I create a issue on github?

--David


If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/Table-with-vertical-headers-tp853p865.html
To start a new topic under Asciidoctor :: Discussion, email [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML

Reply | Threaded
Open this post in threaded view
|

Re: Table with vertical headers

graphitefriction
Administrator
In reply to this post by davidgamba
It's also awkward that I can't spell awkward :p


On Thu, Oct 24, 2013 at 7:22 PM, Sarah White <[hidden email]> wrote:
Hi David,

Yes, this is the same raw HTML I get. And, wow, it's...ackward.

Techinically, the HTML output we're getting is the expected output because it matches the python AsciiDoc processor's output.
However, I agree with you, and I'd also really like Asciidoctor to output the correct/modern `<th class>` tag.
This upgrade will also enable AsciiDoc tables to display correctly on Github.

So, when you get a chance, please do create an issue on GitHub.

Cheers,

Sarah


On Thu, Oct 24, 2013 at 9:35 AM, davidgamba [via Asciidoctor :: Discussion] <[hidden email]> wrote:
Hi Sarah,

Thanks for showing me the h modifier for the column. I totally missed it. However, it adds the class="header" (in the wrong place) instead of actually modifying the html with the
 element.

.What actually gets rendered

&lg;table class="tableblock frame-all grid-all" style="width:100%; ">
  &lg;colgroup>
    &lg;col style="width:25%;">
    &lg;col style="width:25%;">·
    &lg;col style="width:25%;">·
    &lg;col style="width:25%;">·
  &lg;/colgroup>
  &lg;tbody>
    &lg;tr>
      &lg;td class="tableblock halign-left valign-top">&lg;p class="tableblock header">Header&lg;/p>&lg;/td>
      &lg;td class="tableblock halign-left valign-top">&lg;p class="tableblock">data&lg;/p>&lg;/td>
      &lg;td class="tableblock halign-left valign-top">&lg;p class="tableblock">data&lg;/p>&lg;/td>
      &lg;td class="tableblock halign-left valign-top">&lg;p class="tableblock">data&lg;/p>&lg;/td>
    &lg;/tr>
    &lg;tr>
      &lg;td class="tableblock halign-left valign-top">&lg;p class="tableblock header">Header&lg;/p>&lg;/td>
      &lg;td class="tableblock halign-left valign-top">&lg;p class="tableblock">data&lg;/p>&lg;/td>
      &lg;td class="tableblock halign-left valign-top">&lg;p class="tableblock">data&lg;/p>&lg;/td>
      &lg;td class="tableblock halign-left valign-top">&lg;p class="tableblock">data&lg;/p>&lg;/td>
    &lg;/tr>
    &lg;tr>
      &lg;td class="tableblock halign-left valign-top">&lg;p class="tableblock header">Header&lg;/p>&lg;/td>
      &lg;td class="tableblock halign-left valign-top">&lg;p class="tableblock">data&lg;/p>&lg;/td>
      &lg;td class="tableblock halign-left valign-top">&lg;p class="tableblock">data&lg;/p>&lg;/td>
      &lg;td class="tableblock halign-left valign-top">&lg;p class="tableblock">data&lg;/p>&lg;/td>
    &lg;/tr>
  &lg;/tbody>
&lg;/table>

.Where the class header should be
&lg;table class="tableblock frame-all grid-all" style="width:100%; ">
  &lg;colgroup>
    &lg;col style="width:25%;">
    &lg;col style="width:25%;">·
    &lg;col style="width:25%;">·
    &lg;col style="width:25%;">·
  &lg;/colgroup>
  &lg;tbody>
    &lg;tr>
      &lg;td class="tableblock halign-left valign-top header">&lg;p class="tableblock">Header&lg;/p>&lg;/td>
      &lg;td class="tableblock halign-left valign-top">&lg;p class="tableblock">data&lg;/p>&lg;/td>
...

.What I would really like to see
&lg;table class="tableblock frame-all grid-all" style="width:100%; ">
  &lg;colgroup>
    &lg;col style="width:25%;">
    &lg;col style="width:25%;">·
    &lg;col style="width:25%;">·
    &lg;col style="width:25%;">·
  &lg;/colgroup>
  &lg;tbody>
    &lg;tr>
      &lg;th class="tableblock halign-left valign-top">&lg;p class="tableblock">Header&lg;/p>&lg;/th>
      &lg;td class="tableblock halign-left valign-top">&lg;p class="tableblock">data&lg;/p>&lg;/td>
...

I am using
Asciidoctor 0.1.4 [http://asciidoctor.org]

Can you reproduce? Should I create a issue on github?

--David


If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/Table-with-vertical-headers-tp853p865.html
To start a new topic under Asciidoctor :: Discussion, email [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML


Reply | Threaded
Open this post in threaded view
|

Re: Table with vertical headers

davidgamba
lol, awkward that I didn't noticed it.

Here is the issue:

https://github.com/asciidoctor/asciidoctor/issues/738

Thanks for your quick responses and for creating great software and documentation!