Combined sizing charts

Developer
Noel Peña
Size
4,843 Kb
Views
6,072
  1. Combined sizing charts Previews
  2. Combined sizing charts HTML Codes
  3. Combined sizing charts CSS Codes

How do I make an combined sizing charts?

What is a combined sizing charts? How do you make a combined sizing charts? This script and codes were developed by Noel Peña on 17 January 2023, Tuesday.

Combined sizing charts Previews
IQ Test

Combined sizing charts - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Combined sizing charts</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <img src="http://shopewga.com/product_images/uploaded_images/adidas-logo.jpg"><h2>Women's Shirt &amp; Top Sizing</h2>
<table class="sizechart-adidas"> <tr> <th class="adidas-header">PRODUCT LABEL</th> <th class="adidas-header">BUST</th> <th class="adidas-header">WAIST</th> <th class="adidas-header">HIP</th> </tr> <tr> <td>XXS <br />0 - 2</td> <td>28.7 - 29.9"</td> <td>22.4 - 23.6"</td> <td>32.3 - 33.5"</td> </tr> <tr> <td>XS<br />4 - 6</td> <td>30 - 32"</td> <td>24 - 26"</td> <td>34 - 36"</td> </tr> <tr> <td>S<br />8-10</td> <td>33 - 35"</td> <td>27 - 28"</td> <td>37 - 38"</td> </tr> <tr> <td>M<br />12 - 14</td> <td>36 - 37"</td> <td>29 - 31"</td> <td>39 - 41"</td> </tr> <tr> <td>L<br />16 - 18</td> <td>38 - 40"</td> <td>32 - 34"</td> <td>42 - 43"</td> </tr> <tr> <td>XL<br />20 - 22</td> <td>41 - 43"</td> <td>35 - 37"</td> <td>44 - 46"</td> </tr> <tr> <td>2XL<br />24 - 26</td> <td>44 - 46"</td> <td>38 - 41"</td> <td>47 - 49"</td> </tr>
</table>
<br><img src="http://shopewga.com/product_images/uploaded_images/kate-lord-logo-resized.jpg" alt="" />
<table class="sizechart-katelord"> <tr> <td></td> <td>X-Small</td> <td>Small</td> <td>Medium</td> <td>Large</td> <td>X-Large</td> <td>XX-Large</td> </tr> <tr> <td>Size</td> <td>2</td> <td>4-6</td> <td>8-10</td> <td>12-14</td> <td>16-18</td> <td>20</td> </tr> <tr> <td>Bust</td> <td>32-34</td> <td>34-36</td> <td>36-38</td> <td>39-41</td> <td>42-44</td> <td>45-48</td> </tr> <tr> <td>Waist</td> <td>26-28</td> <td>28-30</td> <td>30-32</td> <td>33-35</td> <td>36-38</td> <td>39-42</td> </tr> <tr> <td>Hips</td> <td>34-36</td> <td>36-38</td> <td>38-40</td> <td>41-43</td> <td>44-46</td> <td>47-49</td> </tr>
</table><br>
<div class="sizechart-nivo"><img src="http://www.nivosport.com/wp-content/themes/wp_blank/images/nivo-logo.png" alt="" />
<br>
<h2>Nivo Sizing Chart</h2>
<table class="nivo-tops">
<tbody>
<tr><th>Tops</th><th>&nbsp;</th><th>XS<span>0 - 2</span></th><th>S<span>4 - 6</span></th><th>M<span>8</span></th><th>L<span>10 - 12</span></th><th>XL<span>14 - 16</span></th><th>XXL<span>18</span></th></tr>
<tr>
<td class="odd">Bust</td>
<td class="odd">in</td>
<td class="even">32</td>
<td class="even">33 - 34</td>
<td class="even">35</td>
<td class="even">36 - 37<sup>1/2</sup></td>
<td class="even">39 - 40<sup>1/2</sup></td>
<td class="even">42<sup>1/2</sup></td>
</tr>
<tr>
<td class="odd">&nbsp;</td>
<td class="odd">cm</td>
<td class="odd">81,3</td>
<td class="odd">83,8 - 86,4</td>
<td class="odd">89,0</td>
<td class="odd">91,4 - 95,2</td>
<td class="odd">99,1 - 102,9</td>
<td class="odd">107,9</td>
</tr>
<tr>
<td class="prime">&nbsp;</td>
<td class="prime">&nbsp;</td>
</tr>
<tr>
<td class="odd">Waist</td>
<td class="odd">in</td>
<td class="even">24</td>
<td class="even">25 - 26</td>
<td class="even">27</td>
<td class="even">29 - 29<sup>1/2</sup></td>
<td class="even">31 - 32<sup>1/2</sup></td>
<td class="even">34<sup>1/2</sup></td>
</tr>
<tr>
<td class="odd">&nbsp;</td>
<td class="odd">cm</td>
<td class="odd">61,0</td>
<td class="odd">63,5 - 66,0</td>
<td class="odd">68,5</td>
<td class="odd">71,1 - 74,9</td>
<td class="odd">78,7 - 82,6</td>
<td class="odd">87,6</td>
</tr>
<tr>
<td class="prime">&nbsp;</td>
<td class="prime">&nbsp;</td>
</tr>
<tr>
<td class="odd">Hips</td>
<td class="odd">in</td>
<td class="even">34<sup>1/2</sup></td>
<td class="even">35<sup>1/2</sup> - 36<sup>1/2</sup></td>
<td class="even">37<sup>1/2</sup></td>
<td class="even">38<sup>1/2</sup> - 40</td>
<td class="even">41<sup>1/2</sup> - 43</td>
<td class="even">45</td>
</tr>
<tr>
<td class="odd">&nbsp;</td>
<td class="odd">cm</td>
<td class="odd">87,7</td>
<td class="odd">90,2 - 92,7</td>
<td class="odd">95,2</td>
<td class="odd">97,8 - 101,6</td>
<td class="odd">105,4 - 109,2</td>
<td class="odd">114,3</td>
</tr>
</tbody>
</table>
<br /> <br />
<table class="nivo-bottoms">
<tbody>
<tr><th>Bottoms</th><th>&nbsp;</th><th>0</th><th>2</th><th>4</th><th>6</th><th>8</th><th>10</th><th>12</th><th>14</th><th>16</th><th>18</th></tr>
<tr>
<td class="odd">Waist</td>
<td class="odd">in</td>
<td class="even">23</td>
<td class="even">24</td>
<td class="even">25</td>
<td class="even">26</td>
<td class="even">27</td>
<td class="even">28</td>
<td class="even">29<sup>1/2</sup></td>
<td class="even">31</td>
<td class="even">32<sup>1/2</sup></td>
<td class="even">34<sup>1/2</sup></td>
</tr>
<tr>
<td class="odd">&nbsp;</td>
<td class="odd">cm</td>
<td class="odd">58,5</td>
<td class="odd">61,0</td>
<td class="odd">63,5</td>
<td class="odd">66,0</td>
<td class="odd">68,5</td>
<td class="odd">71,1</td>
<td class="odd">74,9</td>
<td class="odd">78,7</td>
<td class="odd">82,6</td>
<td class="odd">87,6</td>
</tr>
<tr>
<td class="prime">&nbsp;</td>
<td class="prime">&nbsp;</td>
</tr>
<tr>
<td class="odd">Hip</td>
<td class="odd">in</td>
<td class="even">33<sup>1/2</sup></td>
<td class="even">34<sup>1/2</sup></td>
<td class="even">35<sup>1/2</sup></td>
<td class="even">36<sup>1/2</sup></td>
<td class="even">37<sup>1/2</sup></td>
<td class="even">38<sup>1/2</sup></td>
<td class="even">40</td>
<td class="even">41<sup>1/2</sup></td>
<td class="even">43</td>
<td class="even">45</td>
</tr>
<tr>
<td class="odd">&nbsp;</td>
<td class="odd">cm</td>
<td class="odd">85,2</td>
<td class="odd">87,7</td>
<td class="odd">90,2</td>
<td class="odd">92,7</td>
<td class="odd">95,2</td>
<td class="odd">97,8</td>
<td class="odd">101,6</td>
<td class="odd">105,4</td>
<td class="odd">109,2</td>
<td class="odd">114,3</td>
</tr>
<tr>
<td class="prime">&nbsp;</td>
<td class="prime">&nbsp;</td>
</tr>
<tr>
<td class="odd">Inseam</td>
<td class="odd">in</td>
<td class="even">29<sup>1/2</sup></td>
<td class="even">29<sup>1/2</sup></td>
<td class="even">29<sup>1/2</sup></td>
<td class="even">29<sup>1/2</sup></td>
<td class="even">29<sup>1/2</sup></td>
<td class="even">29<sup>1/2</sup></td>
<td class="even">29<sup>1/2</sup></td>
<td class="even">29<sup>1/2</sup></td>
<td class="even">29<sup>1/2</sup></td>
<td class="even">29<sup>1/2</sup></td>
</tr>
<tr>
<td class="odd">&nbsp;</td>
<td class="odd">cm</td>
<td class="odd">74,9</td>
<td class="odd">74,9</td>
<td class="odd">74,9</td>
<td class="odd">74,9</td>
<td class="odd">74,9</td>
<td class="odd">74,9</td>
<td class="odd">74,9</td>
<td class="odd">74,9</td>
<td class="odd">74,9</td>
<td class="odd">74,9</td>
</tr>
</tbody>
</table>
</div>
<p><br /><br /></p>
<div class="sizechart_cutterbuck"> <img id="logo" src="http://www.cutterbuck.com/skin/frontend/enterprise/cutterbuck/images/logo.png" alt="" /> <h2>Cutter &amp; Buck Sizing Chart</h2> <div class="sizechart_table"> <p>Cutter &amp; Buck Men&rsquo;s Regular Size Equivalency Chart</p> <table> <tbody> <tr> <th>Size</th> <th>Neck</th> <th>Chest</th> <th>Waist</th> <th>Center<br />Back Sleeve<br />Length</th> </tr> <tr> <td class="odd">X-Small</td> <td class="odd">13.5-14</td> <td class="odd">36-38</td> <td class="odd">29-30</td> <td class="odd">31.5-32</td> </tr> <tr> <td>Small</td> <td>14-14.5</td> <td>38-40</td> <td>31-32</td> <td>32.5-33</td> </tr> <tr> <td class="odd">Medium</td> <td class="odd">15-15.5</td> <td class="odd">40-42</td> <td class="odd">33-34</td> <td class="odd">33.5-34</td> </tr> <tr> <td>Large</td> <td>16-16.5</td> <td>42-44</td> <td>35-36</td> <td>34.5-35</td> </tr> <tr> <td class="odd">X-Large</td> <td class="odd">16.5-17</td> <td class="odd">44-46</td> <td class="odd">37-38</td> <td class="odd">35.5-36</td> </tr> <tr> <td>XX-Large</td> <td>17-17.5</td> <td>46-48</td> <td>39-40</td> <td>36.5-37</td> </tr> <tr> <td class="odd">XXX-Large</td> <td class="odd">17.5-18</td> <td class="odd">48-50</td> <td class="odd">41-42</td> <td class="odd">37.5-38</td> </tr> </tbody> </table> <br /> <p>Cutter &amp; Buck Men&rsquo;s Big Size (6'3" &amp; under) Equivalency Chart</p> <table> <tbody> <tr> <th>Size</th> <th>Neck</th> <th>Chest</th> <th>Waist</th> <th>Center<br />Back Sleeve<br />Length</th> </tr> <tr> <td class="odd">1XB</td> <td class="odd">18-18.5</td> <td class="odd">46-48</td> <td class="odd">42-44</td> <td class="odd">35</td> </tr> <tr> <td>2XB</td> <td>19-19.5</td> <td>50-52</td> <td>46-48</td> <td>35</td> </tr> <tr> <td class="odd">3XB</td> <td class="odd">20</td> <td class="odd">54-56</td> <td class="odd">50-52</td> <td class="odd">36</td> </tr> <tr> <td>4XB</td> <td>21</td> <td>58-60</td> <td>54-56</td> <td>36</td> </tr> <tr> <td class="odd">5XB</td> <td class="odd">22</td> <td class="odd">62-64</td> <td class="odd">58-60</td> <td class="odd">37</td> </tr> </tbody> </table> <br /> <p>Cutter &amp; Buck Men&rsquo;s Tall Size (6'4" &amp; taller) Equivalency Chart</p> <table> <tbody> <tr> <th>Size</th> <th>Neck</th> <th>Chest</th> <th>Waist</th> <th>Center<br />Back Sleeve<br />Length</th> </tr> <tr> <td class="odd">LT</td> <td class="odd">17-17.5</td> <td class="odd">42-44</td> <td class="odd">38-40</td> <td class="odd">37</td> </tr> <tr> <td>XLT</td> <td>18-18.5</td> <td>46-48</td> <td>42-44</td> <td>38</td> </tr> <tr> <td class="odd">2XT</td> <td class="odd">19-19.5</td> <td class="odd">50-52</td> <td class="odd">46-48</td> <td class="odd">39</td> </tr> <tr> <td>3XT</td> <td>20</td> <td>54-56</td> <td>50-52</td> <td>40</td> </tr> <tr> <td class="odd">4XT</td> <td class="odd">21</td> <td class="odd">58-60</td> <td class="odd">54-56</td> <td class="odd">41</td> </tr> </tbody> </table> <br /> <p>Cutter &amp; Buck Ladies&rsquo; Size Equivalency Chart</p> <table> <tbody> <tr> <th>Size</th> <th>Bust</th> <th>Waist</th> <th>Hip</th> </tr> <tr> <td class="odd">X-Small (2)</td> <td class="odd">34</td> <td class="odd">26</td> <td class="odd">36.5</td> </tr> <tr> <td>Small (4-6)</td> <td>35-36</td> <td>27-28</td> <td>37.5-38.5</td> </tr> <tr> <td class="odd">Medium (8-10)</td> <td class="odd">37-38</td> <td class="odd">29-30</td> <td class="odd">39.5-40.5</td> </tr> <tr> <td>Large (12-14)</td> <td>39.5-41</td> <td>31.5-33</td> <td>42-43.5</td> </tr> <tr> <td class="odd">X-Large (16-18)</td> <td class="odd">42.5-44.5</td> <td class="odd">34.5-36.5</td> <td class="odd">45-47</td> </tr> <tr> <td>XX-Large (20)</td> <td>46</td> <td>38</td> <td>48.5</td> </tr> <tr> <td class="odd">XXX-Large (22)</td> <td class="odd">47.5</td> <td class="odd">39.5</td> <td class="odd">50</td> </tr> </tbody> </table> <br /> <p>Cutter &amp; Buck Women&rsquo;s Plus Size Equivalency Chart</p> <table> <tbody> <tr> <th>Size</th> <th>Bust</th> <th>Waist</th> <th>Hip</th> </tr> <tr> <td class="odd">1X (14-16)</td> <td class="odd">45-47</td> <td class="odd">39-41</td> <td class="odd">46-48</td> </tr> <tr> <td>2X (18-20)</td> <td>48-50</td> <td>42-44</td> <td>49-51</td> </tr> <tr> <td class="odd">3X (22-24)</td> <td class="odd">51-53</td> <td class="odd">45-47</td> <td class="odd">52-54</td> </tr> <tr> <td>4X (26-28)</td> <td>54-56</td> <td>48-50</td> <td>55-57</td> </tr> <tr> <td class="odd">5X (30-32)</td> <td class="odd">57-59</td> <td class="odd">51-53</td> <td class="odd">58-60</td> </tr> </tbody> </table> <br /> <p>Cutter &amp; Buck Corresponding Ladies&rsquo; to Men&rsquo;s Sizes</p> <table> <tbody> <tr> <th>Ladies'</th> <th>XS</th> <th>S</th> <th>M</th> <th>L</th> <th>XL</th> <th>XXL</th> <th>XXXL</th> <th>-----</th> </tr> <tr> <td class="odd">Men's</td> <td class="odd">---</td> <td class="odd">XS</td> <td class="odd">S</td> <td class="odd">M</td> <td class="odd">L</td> <td class="odd">XL</td> <td class="odd">XXL</td> <td class="odd">XXXL</td> </tr> </tbody> </table> </div>
</div><br><br><div class="sizechart-nancylopez"> <img src="http://shopewga.com/product_images/uploaded_images/nancy-lopez-golf-logo.jpg" alt="" /> <table class="ladies-tops"> <tr> <td></td> <td colspan="2">X-Small</td> <td colspan="2">Small</td> <td colspan="2">Medium</td> <td colspan="2">Large</td> <td colspan="2">X-Large</td> </tr> <tr> <td class="ladies">Ladies Tops</td> <td class="plus2">2</td> <td class="plus2">4</td> <td class="plus2">6</td> <td class="plus2">8</td> <td class="plus2">10</td> <td class="plus2">12</td> <td class="plus2">14</td> <td class="plus2">16</td> <td class="plus2">18</td> <td class="plus2">20</td> </tr> <tr> <td class="left">Neck</td> <td class="center">13.5</td> <td class="center">13.75</td> <td class="center">14</td> <td class="center">14.25</td> <td class="center">14.5</td> <td class="center">14.87</td> <td class="center">15.25</td> <td class="center">15.625</td> <td class="center">16.125</td> <td class="center">16.627</td> </tr> <tr> <td class="left">Bust</td> <td class="center">32</td> <td class="center">33</td> <td class="center">34</td> <td class="center">35</td> <td class="center">36</td> <td class="center">37.5</td> <td class="center">39</td> <td class="center">40.5</td> <td class="center">42.5</td> <td class="center">44.5</td> </tr> <tr> <td class="left">Arm</td> <td class="center">29.5</td> <td class="center">29.7</td> <td class="center">30.125</td> <td class="center">30.5</td> <td class="center">30.875</td> <td class="center">31.25</td> <td class="center">31.625</td> <td class="center">32</td> <td class="center">32.375</td> <td class="center">32.75</td> </tr>
</table>
<br />
<table class="ladies-plus-tops"> <tr> <td class="ladiesplus">Ladies PLUS Tops</td> <td class="plus2" colspan="2">1X</td> <td class="plus2" colspan="2">2X</td> <td class="plus2" colspan="2">3X</td> </tr> <tr> <td class="left">Bust</td> <td class="center">44</td> <td class="center">46</td> <td class="center">48</td> <td class="center">50</td> <td class="center">52</td> <td class="center">54</td> </tr> <tr> <td class="left">Waist</td> <td class="center">36</td> <td class="center">38</td> <td class="center">40</td> <td class="center">42</td> <td class="center">44</td> <td class="center">46</td> </tr> <tr> <td class="left">Hip</td> <td class="center">46</td> <td class="center">48</td> <td class="center">50</td> <td class="center">52</td> <td class="center">54</td> <td class="center">56</td> </tr>
</table>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Combined sizing charts - Script Codes CSS Codes

/************************************/
/* Adidas SIZING CHART CSS */
/************************************/
table.sizechart-adidas { width: 100%; max-width: 700px; font-family: Arial; border-collapse: collapse;
}
table.sizechart-adidas th, table.sizechart-adidas td { border: 1px solid black; text-align: center;
}
table.sizechart-adidas .adidas-header { background-color: #5C5C5C; color: #fff;
}
table.sizechart-adidas td:first-child { font-weight: bold;
}
table.sizechart-adidas td:first-child, table.sizechart-adidas td:nth-child(3) { background-color: #e7e7e7;
}
table.sizechart-adidas td:nth-child(2), table.sizechart-adidas td:nth-child(4) { background-color: #f3f3f3;
}
table.sizechart-adidas td { padding: 5px;
}
/************************************/
/* Kate Lord SIZING CHART CSS */
/************************************/
table.sizechart-katelord { width: 70%; border-collapse: collapse;
}
table.sizechart-katelord td { border: 1px solid black; padding: 5px 0px; padding-left: 10px;
}
/************************************/
/* Cutter and Buck SIZING CHART CSS */
/************************************/
.sizechart_cutterbuck .sizechart_table { font-size: 16px;
}
.sizechart_cutterbuck .sizechart_table table { border-collapse: collapse; border: 1px solid #C02F38; width: 100%; max-width: 700px;
}
.sizechart_cutterbuck .sizechart_table table th { background-color: #C02F38; color: #fff; vertical-align: bottom; padding: 5px 10px;
}
.sizechart_cutterbuck .sizechart_table table td { text-align: center; padding: 5px 15px; background-color: #EDEDEE;
}
.sizechart_cutterbuck .sizechart_table table td.odd { background-color: #fff;
}
.sizechart_cutterbuck .sizechart_table p { font-weight: bold; margin: 0px;
}
div#LayoutColumn2.Right { display: none;
}
div#LayoutColumn1.Wide.Content { width: 100%;
}
/************************************/
/****** NIVO SIZING CHART CSS *******/
/************************************/
.sizechart-nivo h2,.sizechart-nivo img{ color:#0D91B4; float: left;
}
.sizechart-nivo img{ width:120px; padding-right: 20px;
}
.sizechart-nivo,.nivo-tops{ clear: both;
}
.sizechart-nivo .nivo-tops th span{ display: block; color: #808080;
}
.sizechart-nivo th,
.sizechart-nivo .nivo-bottoms th:first-child{ color:#0D91B4; border-bottom:2px solid white;
}
.sizechart-nivo .nivo-bottoms th{ color: #808080;
}
.sizechart-nivo table td.odd{ background-color: #fff;
}
.sizechart-nivo table td{ background-color: #EDEDEE; padding: 5px 15px; color:#808080;
}
.sizechart-nivo table{ border-collapse:collapse; border:2px solid white;
}
.sizechart-nivo table td.even{ border-left:1px solid #808080;
}
.sizechart-nivo table td.odd{ border-right:1px solid #808080; border-top:1px solid #808080;
}
.sizechart-nivo table td.prime{ background-color: #fff; border-bottom: 2px solid white;
}
.sizechart-nivo table tr td:first-child{ font-weight: bold;
}
/************************************/
/* Nancy Lopez SIZING CHART CSS */
/************************************/
.sizechart-nancylopez table, .sizechart-nancylopez td { border: 1px solid black; border-collapse: collapse;
}
.sizechart-nancylopez td { text-align: center;
}
.sizechart-nancylopez tr td:first-child { text-align: left; padding: 0px 5px;
}
.sizechart-nancylopez .ladies-tops { width: 100%; max-width: 960px;
}
.sizechart-nancylopez .ladies-tops td { width: 8%;
}
.sizechart-nancylopez .ladies-tops tr:first-child { background-color: #B89F66; text-align: center;
}
.sizechart-nancylopez .ladies-tops tr:nth-child(2) { background-color: #E2D4BB; text-align: center;
}
.sizechart-nancylopez .ladies-tops tr:nth-child(2) td:first-child { text-align: left; width: 13%;
}
.sizechart-nancylopez .ladies-plus-tops { width: 100%; max-width: 700px;
}
.sizechart-nancylopez .ladies-plus-tops td { width: 5%;
}
.sizechart-nancylopez .ladies-plus-tops tr:first-child { background-color: #E2D4BB; text-align: center;
}
.sizechart-nancylopez .ladies-plus-tops tr:first-child td:first-child { background-color: #B89F66; width: 8%;
}
Combined sizing charts - Script Codes
Combined sizing charts - Script Codes
Home Page Home
Developer Noel Peña
Username ewganoel
Uploaded January 17, 2023
Rating 3
Size 4,843 Kb
Views 6,072
Do you need developer help for Combined sizing charts?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Noel Peña (ewganoel) Script Codes
Name
Moare btns2.0
NWGA
EWGA PerksTable
Fun with Media Q
Google Maps JS API
Cutter and Buck Sizing Chart
LB JS
M
Testing Responsive table
Tryout.Flexbox
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!