Html column group and title - html

Question

What would be the html markup to achieve the same result as the first table in http://reference.sitepoint.com/css/tableformatting#tableformatting__tbl_table-objects-display-values
I am looking for how they specified the column group and how to set the title (Women, Men). Also, how to target the specific column group in css.
thanks,
bsr.

Answer 1

Good question. I sat down and reflected on the last time I addressed table formatting issues, then navigated to following links:
http://www.w3.org/TR/html4/struct/tables.html#h-11.2.4
http://www.w3.org/TR/CSS2/tables.html
After some meditation and drinking water, wrote some code for you to refer:
body {
background: #e4e4e4;
font-family: sans-serif;
}
th {
background: #d5d6d6;
}
td {
background: #fff;
}
table {
border-collapse: separate;
border-spacing: 1em 0.5em;
background-color: #ddd;
}
th, td {
border: 1px solid #000;
padding: 4px;
}
tfoot {
font-weight: bold;
}
<table>
<thead>
<tr><th rowspan="2">Question</th><th colspan="2">Women</th><th colspan="2">Men</th></tr>
<tr><th>Yes</th><th>No</th><th>Yes</th><th>No</th></tr>
</thead>
<tbody>
<tr><th>Question1</th><td>42%</td><td>58%</td><td>61%</td><td>39%</td></tr>
<tr><th>Question2</th><td>53%</td><td>47%</td><td>69%</td><td>31%</td></tr>
<tr><th>Question3</th><td>26%</td><td>74%</td><td>51%</td><td>49%</td></tr>
</tbody>
<tfoot>
<tr><th>Average</th><td>40%</td><td>60%</td><td>60%</td><td>40%</td></tr>
</tfoot>
</table>
Mostly when I try to see such layouts, I attempt to count how many rows and how many columns will be necessary in the final html. This helps to construct the html properly.
CSS then simply becomes a selection of those elements with either classes or elements. For your question I chose elements.
HTH!
#gsvolt

Answer 2

I just write the same table as you mentioned in a link. I hope it'll help you out. Thanks
thead th,
tbody tr td:first-child {
background-color: #ccc;
}
<table border="1" style="border-collapse: collapse;">
<thead>
<tr>
<th rowspan="2">Question</th>
<th colspan="2">Women</th>
<th colspan="2">Men</th>
</tr>
<tr>
<th>Yes</th>
<th>No</th>
<th>Yes</th>
<th>No</th>
</tr>
</thead>
<tbody>
<tr>
<td>Question 1</td>
<td>42%</td>
<td>58%</td>
<td>61%</td>
<td>39%</td>
</tr>
<tr>
<td>Question 2</td>
<td>53%</td>
<td>47%</td>
<td>69%</td>
<td>31%</td>
</tr>
<tr>
<td>Question 3</td>
<td>26%</td>
<td>74%</td>
<td>51%</td>
<td>49%</td>
</tr>
<tr>
<td>Average</td>
<td>40%</td>
<td>60%</td>
<td>60%</td>
<td>40%</td>
</tr>
</tbody>
</table>

Answer 3

To make a <th> span a set of rows, give it a rowspan attribute. For collumns, a colspan attribute.
To then target that <th> element, use the normal CSS selector methods, such as .class, #id, tag, etc.

Answer 4

you can use <colgroup> and <col class="men">
see: http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/
5. Vertical Zebra Style