TEI-P5: how to add a css classname to html table tag?

Question

I'd like to style a specific class of tables differently in transformed HTML via CSS.

For example in XML:

<table>
  <row role="label">
    <cell>
      Manuscrit Bodmer
    </cell>
    <cell>
      Manuscrit fr. 1457
    </cell>
  </row>
  <row>
    <cell>
      <lb/>Début <supplied><locus from="1r">fol. 1</locus></supplied> :
    </cell>
    <cell>
      <note><lb/><supplied>fol. 6v&#7506;, ligne 15</supplied> :</note>
    </cell>
  </row>
</table>

In XSL:

<xsl:template match="tei:table[not(. = '')]">
    <xsl:param name="sprache"/>
    <xsl:element name="table">
        <xsl:apply-templates><xsl:with-param name="sprache" select="$sprache"/></xsl:apply-templates>
    </xsl:element>
</xsl:template>

To achieve that I'm thinking of applying a specific CSS class to that table eg. in generated HTML

<table class="comparison-table">

and style it in css. Is this possible? And how can I achieve that exactly?

--- Update Thanks to @zx485 I updated XML & XSL to:

<xsl:template match="tei:table[@rend='comparison-table']">
    <xsl:param name="sprache"/>
    <xsl:copy>
        <xsl:attribute name="class"><xsl:text>comparison-table</xsl:text></xsl:attribute>
        <xsl:apply-templates><xsl:with-param name="sprache" select="$sprache"/></xsl:apply-templates>
    </xsl:copy>
</xsl:template>

<xsl:template match="tei:table[not(. = '')]">
    <xsl:param name="sprache"/>
    <xsl:element name="table">
        <xsl:apply-templates><xsl:with-param name="sprache" select="$sprache"/></xsl:apply-templates>
    </xsl:element>
</xsl:template>

And in my XML:

<table rend="comparison-table">
    <row role="label">
        <cell>
            Manuscrit Bodmer
        </cell>
        <cell>
            Manuscrit fr. 1457
        </cell>
    </row>
  ....

But in the generated HTML file the tables don't have css classname "comparison-table".

=== Update 2: As @zx485 suggested in the discussion room I just had to change to

<xsl:template match="tei:table">

score 2 · Accepted Answer · answered Sep 14 '17 at 09:23

2

Change your template to

<xsl:template match="tei:table[not(. = '')]">
    <xsl:param name="sprache"/>
    <xsl:copy>
      <xsl:attribute name="class"><xsl:text>comparison-table</xsl:text></xsl:attribute>
      <xsl:apply-templates><xsl:with-param name="sprache" select="$sprache"/></xsl:apply-templates>
    </xsl:copy>
</xsl:template>

answered Sep 14 '17 at 09:23

zx485

28,498
28
50
59

Thank you very much! Is there a way to restrict the css-classname to only those tables with a identifier named "comparison-table"? Right now with your modification all html-tables get the classname "comparison-table". – StandardNerd Sep 14 '17 at 09:28
I used your given template. So simply creating templates matching your criteria for these specific `table`s will suffice (use predicates like `match="table[predicate]"`. – zx485 Sep 14 '17 at 09:32
Ah, ok. How do I have to write the identifier in XML eg. ?
– StandardNerd Sep 14 '17 at 09:39
Just like in the answer: `xsl:copy` copies the `table` element and `...` creates its attribute. – zx485 Sep 14 '17 at 09:45
for a better overview of my current xml/xsl i updated the post. – StandardNerd Sep 14 '17 at 09:52
I don't understand what you are asking. The template I gave you above sets a `class` attribute on some `table` elements. – zx485 Sep 14 '17 at 10:01
I want to be able to define which table in XML should be styled specially with css. If in XML only tag is used, then should be executed. If in XML
(is this even allowed?) then should be executed.
– StandardNerd Sep 14 '17 at 10:06
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/154429/discussion-between-zx485-and-standardnerd). – zx485 Sep 14 '17 at 10:12

score 0 · Answer 2 · answered Sep 14 '17 at 12:47

I refactored zx485's solution with xsl:if, it's probably more readable and follows the DRY-principle:

<xsl:template match="tei:table">
  <xsl:param name="sprache"/>
  <xsl:element name="table">
    <xsl:if test="@rend='comparison-table'">
      <xsl:attribute
name="class"><xsl:text>comparison-table</xsl:text></xsl:attribute>
    </xsl:if>
    <xsl:apply-templates><xsl:with-param name="sprache"
select="$sprache"/></xsl:apply-templates>
  </xsl:element>
</xsl:template>

TEI-P5: how to add a css classname to html table tag?

2 Answers2