Can I color table columns using CSS without coloring individual cells? <p>Is there a way to color spans of columns all the way down. See, starting example below:</p> <p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table border="1"&gt; &lt;tr&gt; &lt;th&gt;Motor&lt;/th&gt; &lt;th colspan="3"&gt;Engine&lt;/th&gt; &lt;th&gt;Car&lt;/th&gt; &lt;th colspan="2"&gt;Body&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;1&lt;/td&gt; &lt;td&gt;2&lt;/td&gt; &lt;td&gt;3&lt;/td&gt; &lt;td&gt;4&lt;/td&gt; &lt;td&gt;5&lt;/td&gt; &lt;td&gt;6&lt;/td&gt; &lt;td&gt;7&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;7&lt;/td&gt; &lt;td&gt;1&lt;/td&gt; &lt;td&gt;2&lt;/td&gt; &lt;td&gt;3&lt;/td&gt; &lt;td&gt;4&lt;/td&gt; &lt;td&gt;5&lt;/td&gt; &lt;td&gt;6&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;</code></pre> </div> </div> </p> <p>And I am looking for a better way (less code, non-individual coloring) to color, for example, "Engine" and "Body" spans, including all the cells underneath them in <code>#DDD</code></p> <p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;style&gt; .color { background-color: #DDD } &lt;/style&gt; &lt;table border="1"&gt; &lt;tr&gt; &lt;th&gt;Motor&lt;/th&gt; &lt;th colspan="3" class="color"&gt;Engine&lt;/th&gt; &lt;th&gt;Car&lt;/th&gt; &lt;th colspan="2" class="color"&gt;Body&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;1&lt;/td&gt; &lt;td class="color"&gt;2&lt;/td&gt; &lt;td class="color"&gt;3&lt;/td&gt; &lt;td class="color"&gt;4&lt;/td&gt; &lt;td&gt;5&lt;/td&gt; &lt;td class="color"&gt;6&lt;/td&gt; &lt;td class="color"&gt;7&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;7&lt;/td&gt; &lt;td class="color"&gt;1&lt;/td&gt; &lt;td class="color"&gt;2&lt;/td&gt; &lt;td class="color"&gt;3&lt;/td&gt; &lt;td&gt;4&lt;/td&gt; &lt;td class="color"&gt;5&lt;/td&gt; &lt;td class="color"&gt;6&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;</code></pre> </div> </div> </p>