All things Shopify and commerce
<h2><span></span></h2>
<h2><span>General Garment Guide</span></h2>
<p><span>This garment is true to regular Women’s sizes and are more tailored to the body’s contour. P</span><span>lease use the following as a guide to help you decide which size to buy. Values given are body measurements. To help you choose the best size, we recommend that you compare the measurements with your own.</span></p>
<table width="100%"></table>
<table colour="black">
<tbody>
<tr>
<td>SIZE</td>
<td>BUST</td>
<td>WAIST</td>
<td>HIPS</td>
</tr>
<tr>
<td>8/XS</td>
<td style="text-align: right;">85</td>
<td style="text-align: right;">65</td>
<td style="text-align: right;">93</td>
</tr>
<tr>
<td>10/S</td>
<td style="text-align: right;">90</td>
<td style="text-align: right;">70</td>
<td style="text-align: right;">98</td>
</tr>
<tr>
<td>12/M</td>
<td style="text-align: right;">95</td>
<td style="text-align: right;">75</td>
<td style="text-align: right;">103</td>
</tr>
<tr>
<td>14/L</td>
<td style="text-align: right;">100</td>
<td style="text-align: right;">80</td>
<td style="text-align: right;">108</td>
</tr>
<tr>
<td>16/XL</td>
<td style="text-align: right;">105</td>
<td style="text-align: right;">85</td>
<td style="text-align: right;">113</td>
</tr>
<tr>
<td>18/XXL</td>
<td style="text-align: right;">110</td>
<td style="text-align: right;">90</td>
<td style="text-align: right;">118</td>
</tr>
</tbody>
</table>
This is html from my product template page for a size chart. Ideally I'd like to first row cell to be black with white text like the size chart on https://www.witchery.com.au/long-sleeve-rib-top-60265967
Grey and white cells? as well if possible. I'm new to working with shopify and primarily have experience with Sqaurespace. Would anyone be able to help guide me as to how to change the code above so that I have a black cell row at the top at the very least.
Thank you
Hello @spacejunkCMS,
You have to change the td tags of the first row to th tags.
Then give your table a class name like sizechart
After that add the styling below:
<style>
.sizechart th{
background-color: black;
color: white;
padding: 5px 10px;
}
table{
border-spacing: initial;}
</style>
The new code would be:
<style>
.sizechart th{
background-color: black;
color: white;
padding: 5px 10px;
}
table{
border-spacing: initial;}
</style>
<h2><span></span></h2>
<h2><span>General Garment Guide</span></h2>
<p><span>This garment is true to regular Women’s sizes and are more tailored to the body’s contour. P</span><span>lease use the following as a guide to help you decide which size to buy. Values given are body measurements. To help you choose the best size, we recommend that you compare the measurements with your own.</span></p>
<table width="100%"></table>
<table class="sizechart" colour="black">
<tbody>
<tr>
<th>SIZE</th>
<th>BUST</th>
<th>WAIST</th>
<th>HIPS</th>
</tr>
<tr>
<td>8/XS</td>
<td style="text-align: right;">85</td>
<td style="text-align: right;">65</td>
<td style="text-align: right;">93</td>
</tr>
<tr>
<td>10/S</td>
<td style="text-align: right;">90</td>
<td style="text-align: right;">70</td>
<td style="text-align: right;">98</td>
</tr>
<tr>
<td>12/M</td>
<td style="text-align: right;">95</td>
<td style="text-align: right;">75</td>
<td style="text-align: right;">103</td>
</tr>
<tr>
<td>14/L</td>
<td style="text-align: right;">100</td>
<td style="text-align: right;">80</td>
<td style="text-align: right;">108</td>
</tr>
<tr>
<td>16/XL</td>
<td style="text-align: right;">105</td>
<td style="text-align: right;">85</td>
<td style="text-align: right;">113</td>
</tr>
<tr>
<td>18/XXL</td>
<td style="text-align: right;">110</td>
<td style="text-align: right;">90</td>
<td style="text-align: right;">118</td>
</tr>
</tbody>
</table>
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
How would I adjust the code so that every second line is a light grey?
#CDCDCD
and then white table?
Black - White font
White - Black font
Grey - Black Font
White - Black font
Grey - Black font
This is html from my product template page for a size chart. Ideally I'd like to first row cell to be black with white text like the size chart on https://www.autumngroveclothing.com/
I'm new to working with shopify and primarily have experience with Wix and Squarespace. Would anyone be able to help guide me as to how to change the code above so that I have a black cell row at the top at the very least.
Hi there! I am trying to make the header transparent on my site's homepage so that the slideshow will show up behind it. This is what it currently looks like: I want it to look like this: Preview link: https://www.wyldeclothing.com.au/
Hi everyone We invite everyone to give us feedback on our store! https://auzzistore.com.au/
<h2><span></span></h2>
<h2><span>craftsmanship</span></h2>
<p><span>At TheRosaCollection, our commitment to perfecting craftsmanship ensures every item mirrors the pinnacle of artisanal excellence. We've mastered the balance between luxury and affordability, offering furniture that rivals renowned designer brands while remaining accessible to all. Experience the result of a decade-long journey in mastering craftsmanship at TheRosaCollection now.</span></p>
<table width="100%"></table>
<table colour="black">
<tbody>
<tr>
<td>SIZE</td>
<td>BUST</td>
<td>WAIST</td>
<td>HIPS</td>
</tr>
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025