A test table with merged cells
Geek Answers Handbook

HTML table header using rowspan

<html>
<body>

<TABLE border="1" ">

<CAPTION><EM>A test table with merged cells</EM></CAPTION>

<TR><TH rowspan="2"><TH colspan="2"> Average
    <TH rowspan="2">Red<BR>eyes </TH>
</TR>
<TR>
  <TH>height</TH><TH>weight</TH>
</TR>
<TR> 
  <TD>1.9<TD>0.003<TD>40%</TD>
</TR>
<TR> 
  <TD>1.7<TD>0.002<TD>43%</TD>
</TR>

</TABLE>
</body>
</html>

I get output with the first title element as empty

  A test table with merged cells
/-----------------------------------------\
|          |      Average      |   Red    |
|          |-------------------|  eyes    |
|          |  height |  weight |          |
|-----------------------------------------|
|  1.9     | 0.003   |   40%    |         |
|-----------------------------------------|
|  1.7     | 0.002   |   43%    |         |
\-----------------------------------------/

Expected Result

  A test table with merged cells
/----------------------------- \
|      Average      |   Red    |          
|-------------------|  eyes    |          
|  height |  weight |          |          
|------------------------------|
|  1.9     | 0.003   |   40%   |          
|------------------------------|
|  1.7     | 0.002   |   43%   |          
\------------------------------/
+5
source share
3 answers

Remove excess TH in code

http://jsfiddle.net/yqQsP/

<html>
<body>

<TABLE border="1" >

<CAPTION><EM>A test table with merged cells</EM></CAPTION>

<TR>
    <TH colspan="2"> Average</TH>
    <TH rowspan="2">Red<BR>eyes </TH>
</TR>
<TR>
  <TH>height</TH><TH>weight</TH>
</TR>
<TR> 
  <TD>1.9<TD>0.003<TD>40%</TD>
</TR>
<TR> 
  <TD>1.7<TD>0.002<TD>43%</TD>
</TR>

</TABLE>
</body>
</html>
+11
source

While nauphal already addressed your issue, I just wanted to make some suggestions regarding your HTML structure.

Firstly, uppercase is optional (case insensitive HTML), although whether you should ever switch to lowercase XHTML is mandatory (and frankly, looks a little better).

-, tbody ( , , , -), , "" tbody , th thead, ( , , ).

-, :

<TR> 
  <TD>1.9<TD>0.003<TD>40%</TD>
</TR>

, :

<TR> 
  <TD>1.9</TD><TD>0.003</TD><TD>40%</TD>
</TR>

, ( HTML 4, ), , , , .

-, nit-picking, , caption , caption .

, CSS:

<table>
    <caption>A test table with merged cells</caption>
    <theader>
        <tr>
            <th colspan="2">Average</th>
            <th rowspan="2">Red Eyes</th>
        </tr>
        <tr>
            <th>height</th>
            <th>weight</th>
        </tr>
    </theader>
    <tbody>
        <tr>
            <td>1.9</td>
            <td>0.003</td>
            <td>40%</td>
        </tr>
        <tr>
            <td>1.7</td>
            <td>0.002</td>
            <td>43%</td>
        </tr>
    </tbody>
</table>​

CSS

caption {
    font-style: italic;
}

td,
th {
    border: 1px solid #000;
    padding: 0.2em;
}​

JS Fiddle.

+6

Change the first row

<TR>
    <TH colspan="2"> Average</TH>
    <TH rowspan="2">Red<BR>eyes </TH>
</TR>

This will solve the problem.

0
source

More articles:


All Articles