Проблемы с таблицей <tr><td>

Question

Я пытаюсь создать таблицу, похожую на это изображение ниже.

Как вы можете видеть под одной колонки есть еще два столбца, который является немного сложнее с моей стороны. Мне было трудно понять это. Вот мои коды:

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

Вот jSFiddle: https://jsfiddle.net/xLdg6n9p/

Любая идея, как это сделать?

Answer 1

Вам нужно подумать о каждой строке, имеющей пять столбцов, а затем использовать colspan, где ячейки в строке охватывают несколько столбцов. Например:

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

Таким образом, каждый <tr> должны иметь в общей сложности 5 <td> элементов (или эквивалент 5 с использованием colspans).

Answer 2

Вы можете использовать colspan, чтобы решить вашу проблему. Вот пример:

http://jsfiddle.net/omzc6211/

Answer 3

трафика почвы, кажется, немного ниже, чем у других столбцов, так что я бы на это так: (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>