Search code examples
htmlschema.orgsemantic-markupmicrodata

Using Microdata in <table>

I'm trying to add Schema.org markup to my HTML. Specifically, I want to markup some events, as per these examples. Although these examples are helpful, they are also somewhat incomplete, e.g. the use of the performer/performers properties is not demonstrated.

In my particular case each event is represented as a table row. Before adding the Schema.org properties, the markup looks like this:

    <tr id="459">

        <td class="nameCol">
            <a href="/summer-festivals/show/459/film/dublin-chinese-film-festival-2013">Dublin Chinese Film Festival 2013</a>
        </td>
        <td class="typeCol">Film</td>
        <td class="startCol">1 Feb 2013</td>
        <td class="endCol">9 Feb 2013</td>
        <td class="addressCol">Lighthouse Cinema, Smithfield Square, Dublin 7</td>
        <td class="countryCol">Ireland</td>                       
    </tr>

And after the first attempt at adding the Schema.org properties it looks like this:

   <tr id="459" itemscope itemtype="http://schema.org/Event">

        <td class="nameCol">
            <a href="/summer-festivals/show/459/film/dublin-chinese-film-festival-2013" itemprop="url">Dublin Chinese Film Festival 2013</a>
        </td>
        <td class="typeCol">Film</td>

        <td class="startCol">
            <meta itemprop="startDate" content="2013-02-01">
            1 Feb 2013
        </td>

        <td class="endCol">
            <meta itemprop="endDate" content="2013-02-09">
            9 Feb 2013
        </td>

        <span itemprop="location" itemscope itemtype="http://schema.org/Place">

            <span itemprop="geo" itemscope itemtype="http://schema.org/GeoCoordinates">
                <meta itemprop="latitude" content="53.3482"/>
                <meta itemprop="longitude" content="-6.27794"/>
            </span>

            <td class="addressCol">Lighthouse Cinema, Smithfield Square, Dublin 7</td>

            <span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
                <td class="countryCol" itemprop="addressCountry">Ireland</td>
            </span>
        </span>
    </tr>

There are a few problems with this:

  1. In the Schema.org examples the root for each event is always a <div>, but in my case it's a <tr>, is this allowed?

  2. I want to include in the Schema.org markup some data that isn't actually shown to the users (e.g. latitude, longitude). Currently, I'm doing this by adding extra <span>s between the table cells, but this is not valid HTML.

  3. Similarly I need to wrap the country cell in a <span> in order to mark it up correctly from the Schema.org POV. But the markup then becomes invalid from a HTML POV.

Solution

  • Regarding 1: You may use the Microdata attributes on any HTML element. So yes, you can use the td elements. The examples always use div/span because this it what would always work. It's good practice to use your existent markup instead of adding new div/span elements.

    Regarding 2: Maybe the itemref attribute could help here?

    […] It is merely a syntactic construct to aid authors in adding annotations to pages where the data to be annotated does not follow a convenient tree structure. For example, it allows authors to mark up data in a table so that each column defines a separate item, while keeping the properties in the cells.

    Regarding 3: Why don't you wrap the span in td? 

    <td class="countryCol" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
  <span itemprop="addressCountry">Ireland</span>
</td>