Python Scrapy dynamic item with grouping by Xpath
<p>My page is as below</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="width:100%;" id="innerTSpec"&gt;
        &lt;table width="100%" cellpadding="0" cellspacing="0" class="PrintIE7in80PercentWidth PrintIE6in80PercentWidth"&gt;
            &lt;tr&gt;&lt;td &gt;&lt;/td&gt;&lt;td  class="techspecheading"&gt;    Header1&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td &gt;&lt;/td&gt;&lt;td  class="techspecdata"&gt;    &lt;/td&gt;&lt;td width="10px"&gt;&lt;/td&gt;&lt;td class=""&gt;        &lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td &gt;&lt;/td&gt;&lt;td  class="techspecheading"&gt;    &lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td &gt;&lt;/td&gt;&lt;td  class="techspecdata"&gt;    My Attribute1: &lt;/td&gt;&lt;td width="10px"&gt;&lt;/td&gt;&lt;td class="techspecdata"&gt;    Value1    &lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td &gt;&lt;/td&gt;&lt;td  class="techspecheading"&gt;    &lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td &gt;&lt;/td&gt;&lt;td  class="techspecdata"&gt;    My Attribute2: &lt;/td&gt;&lt;td width="10px"&gt;&lt;/td&gt;&lt;td class="techspecdata"&gt;    Value2     &lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td &gt;&lt;/td&gt;&lt;td  class="techspecheading"&gt;    &lt;/td&gt;&lt;/tr&gt;
---&gt;        &lt;tr&gt;&lt;td &gt;&lt;/td&gt;&lt;td  class="techspecheading"&gt;    &lt;hr&gt;&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td &gt;&lt;/td&gt;&lt;td  class="techspecdata"&gt;    &lt;/td&gt;&lt;td width="10px"&gt;&lt;/td&gt;&lt;td class=""&gt;        &lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td &gt;&lt;/td&gt;&lt;td  class="techspecheading"&gt;   Header2&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td &gt;&lt;/td&gt;&lt;td  class="techspecdata"&gt;    &lt;/td&gt;&lt;td width="10px"&gt;&lt;/td&gt;&lt;td class=""&gt;        &lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td &gt;&lt;/td&gt;&lt;td  class="techspecheading"&gt;    &lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td &gt;&lt;/td&gt;&lt;td  class="techspecdata"&gt;    My Attribute3: &lt;/td&gt;&lt;td width="10px"&gt;&lt;/td&gt;&lt;td class="techspecdata"&gt;    More Value1     &lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td &gt;&lt;/td&gt;&lt;td  class="techspecheading"&gt;    &lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td &gt;&lt;/td&gt;&lt;td  class="techspecdata"&gt;    My Attribute4: &lt;/td&gt;&lt;td width="10px"&gt;&lt;/td&gt;&lt;td class="techspecdata"&gt;    More Value2     &lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td &gt;&lt;/td&gt;&lt;td  class="techspecheading"&gt;    &lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td &gt;&lt;/td&gt;&lt;td  class="techspecdata"&gt;   My Attribute5: &lt;/td&gt;&lt;td width="10px"&gt;&lt;/td&gt;&lt;td class="techspecdata"&gt;    More Value3     &lt;/td&gt;&lt;/tr&gt;
---&gt;        &lt;tr&gt;&lt;td &gt;&lt;/td&gt;&lt;td  class="techspecheading"&gt;    &lt;hr&gt;&lt;/td&gt;&lt;/tr&gt;
            
        &lt;/table&gt;
    &lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>The Header and Attributes are not in fixed position it changes every time with page. 
I am trying to make like below:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>Header1             | Header2                 |...
----------------------------------------------
My Attribute1:Value1|My Attribute3:More Value1|...
My Attribute2:Value2|My Attribute4:More Value2|...
                    |My Attribute5:More Value3|...</code></pre>
</div>
</div>
</p>

<p>NB: I am using dynamic items which will be added like </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>My Item is as below
--------------------------------------
class Website(Item):
    def __setitem__(self, key, value):
        if key not in self.fields:
            self.fields[key] = Field()
        self._values[key] = value
--------------------------------------
and in spider adding as below
--------------------------------------
item[Heading]=Body.xpath('..........').extract()</code></pre>
</div>
</div>
</p>

<p>I don't have scrapy installed, but I think you can easily modify it to use scrapy's <code>Items</code>.</p>

<pre><code>from lxml.html import fromstring


html = """
&lt;div style="width:100%;" id="innerTSpec"&gt;
        &lt;table width="100%" cellpadding="0" cellspacing="0" class="PrintIE7in80PercentWidth PrintIE6in80PercentWidth"&gt;
            &lt;tr&gt;&lt;td &gt;&lt;/td&gt;&lt;td  class="techspecheading"&gt;    Header1&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td &gt;&lt;/td&gt;&lt;td  class="techspecdata"&gt;    &lt;/td&gt;&lt;td width="10px"&gt;&lt;/td&gt;&lt;td class=""&gt;        &lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td &gt;&lt;/td&gt;&lt;td  class="techspecheading"&gt;    &lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td &gt;&lt;/td&gt;&lt;td  class="techspecdata"&gt;    My Attribute1: &lt;/td&gt;&lt;td width="10px"&gt;&lt;/td&gt;&lt;td class="techspecdata"&gt;    Value1    &lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td &gt;&lt;/td&gt;&lt;td  class="techspecheading"&gt;    &lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td &gt;&lt;/td&gt;&lt;td  class="techspecdata"&gt;    My Attribute2: &lt;/td&gt;&lt;td width="10px"&gt;&lt;/td&gt;&lt;td class="techspecdata"&gt;    Value2     &lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td &gt;&lt;/td&gt;&lt;td  class="techspecheading"&gt;    &lt;/td&gt;&lt;/tr&gt;
---&gt;        &lt;tr&gt;&lt;td &gt;&lt;/td&gt;&lt;td  class="techspecheading"&gt;    &lt;hr&gt;&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td &gt;&lt;/td&gt;&lt;td  class="techspecdata"&gt;    &lt;/td&gt;&lt;td width="10px"&gt;&lt;/td&gt;&lt;td class=""&gt;        &lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td &gt;&lt;/td&gt;&lt;td  class="techspecheading"&gt;   Header2&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td &gt;&lt;/td&gt;&lt;td  class="techspecdata"&gt;    &lt;/td&gt;&lt;td width="10px"&gt;&lt;/td&gt;&lt;td class=""&gt;        &lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td &gt;&lt;/td&gt;&lt;td  class="techspecheading"&gt;    &lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td &gt;&lt;/td&gt;&lt;td  class="techspecdata"&gt;    My Attribute3: &lt;/td&gt;&lt;td width="10px"&gt;&lt;/td&gt;&lt;td class="techspecdata"&gt;    More Value1     &lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td &gt;&lt;/td&gt;&lt;td  class="techspecheading"&gt;    &lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td &gt;&lt;/td&gt;&lt;td  class="techspecdata"&gt;    My Attribute4: &lt;/td&gt;&lt;td width="10px"&gt;&lt;/td&gt;&lt;td class="techspecdata"&gt;    More Value2     &lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td &gt;&lt;/td&gt;&lt;td  class="techspecheading"&gt;    &lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td &gt;&lt;/td&gt;&lt;td  class="techspecdata"&gt;   My Attribute5: &lt;/td&gt;&lt;td width="10px"&gt;&lt;/td&gt;&lt;td class="techspecdata"&gt;    More Value3     &lt;/td&gt;&lt;/tr&gt;
---&gt;        &lt;tr&gt;&lt;td &gt;&lt;/td&gt;&lt;td  class="techspecheading"&gt;    &lt;hr&gt;&lt;/td&gt;&lt;/tr&gt;
        &lt;/table&gt;
    &lt;/div&gt;
"""
body = fromstring(html)

heading = None
item = {}
for tr in body.xpath(r'//div[@id="innerTSpec"]//tr'):
    # Extract row data. Skip rows without data.
    data = tr.xpath(r'.//td[@class]/text()')
    data = list(filter(None, [txt.strip() for txt in data]))
    if not data:
        continue

    # Populate item.  
    if len(data) == 1:
        heading = data[0]
    else:
        item.setdefault(heading, []).append(''.join(data))
print(item)
</code></pre>

<p><code>item</code>:</p>

<pre><code>{
    'Header1': ['My Attribute1:Value1', 'My Attribute2:Value2'],
    'Header2': ['My Attribute3:More Value1', 'My Attribute4:More Value2', 'My Attribute5:More Value3']
}
</code></pre>

python xpath scrapy scrapy-spider