You could use itemref
attributes to add these properties to the Product
, but this would still be invalid as they would still apply to the Offer
in addition (but these properties are not allowed for this type).
So you have to move them out of Offer
’s scope.
There are various ways how to do that. Without seeing the full HTML, it’s not possible to decide which one works or is the best.
If the table wouldn’t contain anything else, you could use:
<table>
<tr><th>Weight:</th><td itemprop="weight" itemscope itemtype="http://schema.org/QuantitativeValue">3.75g</td></tr>
<tr><th>Width:</th><td itemprop="width" itemscope itemtype="http://schema.org/QuantitativeValue">20mm</td></tr>
<tr><th>Height:</th><td itemprop="height" itemscope itemtype="http://schema.org/QuantitativeValue">20mm</td></tr>
<tr itemprop="offers" itemscope itemtype="http://schema.org/Offer"><th>Availability:</th><td><link itemprop="availability" href="http://schema.org/InStock"/>available</td></tr>
</table>
If you have more rows that should belong to Offer
, you could use the tbody
element to group these:
<table>
<tbody>
<tr><th>Weight:</th><td itemprop="weight" itemscope itemtype="http://schema.org/QuantitativeValue">3.75g</td></tr>
<tr><th>Width:</th><td itemprop="width" itemscope itemtype="http://schema.org/QuantitativeValue">20mm</td></tr>
<tr><th>Height:</th><td itemprop="height" itemscope itemtype="http://schema.org/QuantitativeValue">20mm</td></tr>
</tbody>
<tbody itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<tr><th>Availability:</th><td><link itemprop="availability" href="http://schema.org/InStock"/>available</td></tr>
</tbody>
</table>
If the rows are mixed (e.g., the first 3 for Product
, then 1 for Offer
, then some for Product
again), you would have to use itemref
and omit the nesting:
<div itemscope itemtype="http://schema.org/Product" itemref="product-weight product-width product-height">
<h1 itemprop="name">Product name</h1>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer" itemref="offer-availability">
</div>
</div>
<!-- not nested under any itemscope -->
<table>
<tr><th>Weight:</th><td id="product-weight" itemprop="weight" itemscope itemtype="http://schema.org/QuantitativeValue">3.75g</td></tr>
<tr><th>Width:</th><td id="product-width" itemprop="width" itemscope itemtype="http://schema.org/QuantitativeValue">20mm</td></tr>
<tr><th>Height:</th><td id="product-height" itemprop="height" itemscope itemtype="http://schema.org/QuantitativeValue">20mm</td></tr>
<tr><th>Availability:</th><td><link id="offer-availability" itemprop="availability" href="http://schema.org/InStock"/>available</td></tr>
</table>