CODEWITHSUNDEEP
htmlcsshtml-table
user5072259
user5072259

Reputation:

Table issues with <tr> <td>

I am trying to create a table similar to this image below.

enter image description here

As you can see under one column there are two more columns, which is a bit tricky on my part. I was having a hard time figuring this out. Here's my codes:

<table style="width:80%" border="1">
<tr>
    <th colspan="3">RESIDENTIAL CARPET CLEANING FREQUENCY CHART</th>
</tr>

  <tr>
    <th>Traffic Soil Rating</th>
    <th>Carpet Owner / Maintainer</th>      
    <th>Professional Carpet Cleaner / Restorer</th>
  </tr>


  <tr>
    <td>Eve</td>
    <td>Jackson</td>        
    <td>94</td>
  </tr>

  <tr>
    <td>John</td>
    <td>Doe</td>        
    <td>80</td>
  </tr>

Here's the jSFiddle: https://jsfiddle.net/xLdg6n9p/

Any idea how to do this?

Upvotes: 1

Views: 421

Answers (3)

Tom Nolan
Tom Nolan

Reputation: 1957

You can use colspan to solve your problem. Here is an example:

<table width="100%" border="1">
    <tbody>
        <tr>
            <th>Name</th>
            <th colspan="2">Easy</th>
            <th colspan="2">Normal</th>
            <th colspan="2">Hard</th>
        </tr>
        <tr>
            <th></th>
            <th colspan="2">Score</th>
            <th colspan="2">Score</th>
            <th colspan="2">Score</th>
        </tr>
        <tr>
            <th></th>
            <th>Qz1</th>
            <th>Qz2</th>
            <th>Qz1</th>
            <th>Qz2</th>
            <th>Qz1</th>
            <th>Qz2</th>
        </tr>
        <tr>
            <th>Davy Jones</th>
            <td>1</td>
            <td>4</td>
            <td>2</td>
            <td>5</td>
            <td>3</td>
            <td>6</td>
        </tr>
    </tbody>
</table>

Upvotes: 0

Rachel Gallen
Rachel Gallen

Reputation: 28583

The Traffic soil seems to be a little lower than the other columns so i would go at it like this: (fiddle)

.soil {
  font-weight: bold;
}
table {
  font-size: 11pt;
}
td {
  max-width: 15%;
  text-align: center;
}
<table style="width:100%" border="0">
  <tr>
    <th colspan="5">RESIDENTIAL CARPET CLEANING FREQUENCY CHART</th>
  </tr>

  <tr>
    <th colspan="1"></th>
    <th colspan="2">Carpet Owner / Maintainer</th>
    <th colspan="2">Professional Carpet Cleaner / Restorer</th>
  </tr>


  <tr>

    <th class="soil">Traffic Soil Rating</th>
    <th></th>
    <th></th>
    <th></th>
    <th></th>
  </tr>
  <tr>
    <th></th>
    <th>Vacuuming</th>
    <th>Spot Cleaning</th>
    <th>Heavy Use</th>
    <th>Restorative</th>
  </tr>

  <tr>
    <td class="soil">Light</td>


    <td>1-2 times a week</td>
    <td>Daily or as soon as spots are noticed</td>
    <td>Stuff</td>
    <td>Stuff</td>
  </tr>
</table>

Upvotes: 1

kojow7
kojow7

Reputation: 11424

You need to think of every single row having five columns and then use colspan where cells in a row span multiple columns. For example:

<table style="width:80%" border="1">
<tr>
    <th colspan="5">RESIDENTIAL CARPET CLEANING FREQUENCY CHART</th>
</tr>

  <tr>
    <th colspan="2">Traffic Soil Rating</th>
    <th>Carpet Owner / Maintainer</th>      
    <th colspan="2">Professional Carpet Cleaner / Restorer</th>
  </tr>


  <tr>
    <td>Eve</td>
    <td>Jackson</td>        
    <td>94</td>
    <td>Other</td>        
    <td>Stuff</td>
  </tr>

  <tr>
    <td>John</td>
    <td>Doe</td>        
    <td>80</td>
    <td>Other</td>        
    <td>Stuff</td>
  </tr>
</table>

Therefore, every <tr> should have a total of 5 <td> elements (or the equivalent of 5 with the use of colspans).

Upvotes: 1

Related Questions