2

I'm looking to structure the tables in this way:

enter image description here

I tried doing that but I don't know how to put two columns inside a row (inch, cm)

It's a clothing store of a friend so I'd appreciate any help in this.

tadm123
  • 8,294
  • 7
  • 28
  • 44
  • 2
    use colspan="2" for Bust, waist etc, check this https://stackoverflow.com/questions/9830506/how-do-you-use-colspan-and-rowspan-in-html-tables – charan kumar Sep 18 '18 at 05:33

3 Answers3

2

Did you try to do like this?

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
    text-align:center;
}

.title{
   background-color:red;
}

.sub-title{
   background-color:lightgreen;
}

.footer{
  background-color:lightcoral;
}
<table>
   <thead>
      <tr class="title">
         <th colspan="7">Size Table</th>
      </tr>
      <tr class="sub-title">
         <th rowspan="2"></th>
         <th colspan="2">Bust</th>
         <th colspan="2">Bust</th>
         <th colspan="2">Bust</th>
      </tr>
      <tr class="sub-title">
         <th>CH</th>
         <th>CM</th>
         <th>CH</th>
         <th>CM</th>
         <th>CH</th>
         <th>CM</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>S</td>
         <td>col1</td>
         <td>col2</td>
         <td>col3</td>
         <td>Col4</td>
         <td>Col5</td>
         <td>Col6</td>
      </tr>
      <tr>
         <td>M</td>
         <td>col1</td>
         <td>col2</td>
         <td>col3</td>
         <td>Col4</td>
         <td>Col5</td>
         <td>Col6</td>
      </tr>
      <tr>
         <td>L</td>
         <td>col1</td>
         <td>col2</td>
         <td>col3</td>
         <td>Col4</td>
         <td>Col5</td>
         <td>Col6</td>
      </tr>
   </tbody>
   <tfoot>
      <tr class="footer">
         <th colspan="7">description</th>
      </tr>
   </tfoot>

</table>
Udara Kasun
  • 2,182
  • 18
  • 25
1

Check This Code. I think this will help you

table {
    empty-cells: show;
    border: 1px solid #000;
}

table td,
table th {
    min-width: 2em;
    min-height: 2em;
    border: 1px solid #000;
}
<table>
    <thead>
        <tr>
            <th rowspan="2"></th>
            <th colspan="2">&nbsp;</th>
            <th colspan="2">&nbsp;</th>
        </tr>
        <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
            <th>d</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
         </tr>
    </tbody>
</table>
Hariom Singh
  • 1,420
  • 1
  • 8
  • 21
1
this code will help you. check the below jsfiddle link

    https://jsfiddle.net/Gurmatpal/aq9Laaew/221894/
Gurmatpal
  • 134
  • 8