How can I modify HTML for a black cell row in a size chart?

How can I modify HTML for a black cell row in a size chart?

spacejunkCMS
Shopify Partner
2 0 0

<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 

Replies 6 (6)

joker7
Excursionist
12 1 0

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

spacejunkCMS
Shopify Partner
2 0 0
Thank you, would I just paste this as HTML?
On the page?

If I wanted the top line of the table to be black that is great.

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

I really appreciate you helping me with his
does mean the background color of the table. are you able to help
me understand the code you have given me? Thank you so much, I look forward
to hearing from you.

🙂 Christina


##- Please type your reply above this line -#
cytatech
Shopify Partner
4 0 0

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.  

cytatech
Shopify Partner
4 0 0

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/

 

cytatech
Shopify Partner
4 0 0

Hi everyone We invite everyone to give us feedback on our store! https://auzzistore.com.au/

cytatech
Shopify Partner
4 0 0

<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>

https://therosacollection.com/