HTML - colspan and rowspan

colspan code

<table border="1">
 <thead>
 <tr>
  <th>heading column 1</th>
  <th>heading column 2</th>
 </tr>
 </thead>
 <tr>
  <td colspan=2  bgcolor="yellow">
  <u>colspan</u> row 1, column 1</td>
 </tr>
 <tr>
  <td>row 2, column 1</td>
  <td>row 2, column 2</td>
 </tr>
</table>

This is how it will appear in a browser

heading column 1	heading column 2
colspan row 1, column 1
row 2, column 1	row 2, column 2

View above example output in a new browser window

rowspan code

<table border="1">
 <thead>
 <tr>
  <th >heading column 1</th>
  <th>heading column 2</th>
 </tr>
 </thead>
 <tr>
  <td rowspan="2" bgcolor="yellow">
  row 1, column 1</td>
  <td>row 1, column 2</td>
 </tr>
 <tr>
  <td>row 2, column 2</td>
 </tr>
</table>

This is how it will appear in a browser

heading column 1	heading column 2
row 1, column 1	row 1, column 2
row 1, column 1	row 2, column 2

View above example output in a new browser window

mixed colspan and rowspan code

<table border="1">
 <thead>
 <tr>
  <th >heading column 1</th>
  <th>heading column 2</th>
 </tr>
 </thead>
 <tr>
  <td rowspan="2" bgcolor="yellow">
   row 1, column 1</td>
  <td>row 1, column 2</td>
 </tr>
 <tr>
  <td>row 2, column 2</td>
 </tr>
 <tr>
  <td colspan="2" bgcolor="green">
   row 3, column 1</td>
 </tr>

</table>

This is how it will appear in a browser

heading column 1	heading column 2
row 1, column 1	row 1, column 2
row 1, column 1	row 2, column 2
row 3, column 1

View above example output in a new browser window