Computers > Internet > HTML > <table> codes
HTML Table samples

Command
Description
<table>begin Table
</table> end Table
<tr> begin Table Row
</tr> end Table Row
<td> begin Table Data (Column or Cell)
</td> end Table Data

All your HTML & Content goes between the <td> and </td>, never between anything else.

Table with 1 row and 1 column
Source Code (HTML)  
  How it appears

<table>
  <tr>
    <td>
      Content
    </td>
  </tr>
</table>
 

Content

Table with 1 row and 1 column - border
Source Code (HTML)  
  How it appears

<table border=3>
  <tr>
    <td>
      Content
    </td>
  </tr>
</table>
 

Content

Table with 1 row and 2 columns
Source Code (HTML)  
  How it appears

<table border=3>
  <tr>
    <td>
      Content 1
    </td>
    <td>
      Content 2
    </td>
  </tr>
</table>
 

Content 1 Content 2

Table with 2 rows and 1 column
Source Code (HTML)  
  How it appears

<table border=3>
  <tr>
    <td>
      Content 1
    </td>
  </tr>
  <tr>
    <td>
      Content 2
    </td>
  </tr>
</table>
 

Content 1
Content 2

Table with 2 rows and 2 columns
Source Code (HTML)  
  How it appears

<table border=3>
  <tr>
    <td>
      Content 1
    </td>
    <td>
      Content 2
    </td>
  </tr>
  <tr>
    <td>
      Content 3
    </td>
    <td>
      Content 4
    </td>
  </tr>
</table>
 

Content 1 Content 2
Content 3 Content 4

Table with 2 rows and 3 columns
Source Code (HTML)  
  How it appears

<table border=3>
  <tr>
    <td>
      Content 1
    </td>
    <td>
      Content 2
    </td>
    <td>
      Content 3
    </td>
  </tr>
  <tr>
    <td>
      Content 4
    </td>
    <td>
      Content 5
    </td>
    <td>
      Content 6
    </td>
  </tr>
</table>
 

Content 1 Content 2 Content 3
Content 4 Content 5 Content 6

Table with 3 rows and 2 columns
Source Code (HTML)  
  How it appears

<table border=3>
  <tr>
    <td>
      Content 1
    </td>
    <td>
      Content 2
    </td>
  </tr>
  <tr>
    <td>
      Content 3
    </td>
    <td>
      Content 4
    </td>
  </tr>
  <tr>
    <td>
      Content 5
    </td>
    <td>
      Content 6
    </td>
  </tr>
</table>
 

Content 1 Content 2
Content 3 Content 4
Content 5 Content 6

Table with 2 rows and 2 columns - cellspacing
and bgcolor
Source Code (HTML)  
  How it appears

<table border=3 cellspacing=10>
  <tr>
    <td bgcolor="#ccccff">
      Content 1
    </td><td bgcolor="#ccccff">
      Content 2
    </td>
  </tr><tr>
    <td bgcolor="#ccccff">
      Content 3
    </td><td bgcolor="#ccccff">
      Content 4
    </td>
  </tr>
</table>
 

Content 1 Content 2
Content 3 Content 4

Table with 2 rows and 2 columns - cellpadding
and bgcolor
Source Code (HTML)  
  How it appears

<table border=3 cellpadding=10>
  <tr>
    <td bgcolor="#ccccff">
      Content 1
    </td><td bgcolor="#ccccff">
      Content 2
    </td>
  </tr><tr>
    <td bgcolor="#ccccff">
      Content 3
    </td><td bgcolor="#ccccff">
      Content 4
    </td>
  </tr>
</table>
 

Content 1 Content 2
Content 3 Content 4

Table with 3 rows and 2 columns - colspan
1st row spans both columns
Source Code (HTML)  
  How it appears

<table border=3 cellpadding=5>
  <tr>
    <td colspan=2>
      Content 1
    </td>
  </tr><tr>
    <td>
      Content 3
    </td><td>
      Content 4
    </td>
  </tr><tr>
    <td>
      Content 5
    </td><td>
      Content 6
    </td>
  </tr>
</table>
 

Content 1
Content 2 Content 3
Content 4 Content 5

Table with 3 rows and 2 columns - align
1st row spans both columns
Source Code (HTML)  
  How it appears

<table border=3 cellpadding=5>
  <tr>
    <td colspan=2 align=center>
      Content 1
    </td>
  </tr><tr>
    <td>
      Content 3
    </td><td>
      Content 4
    </td>
  </tr><tr>
    <td>
      Content 5
    </td><td>
      Content 6
    </td>
  </tr>
</table>
 

Content 1
Content 2 Content 3
Content 4 Content 5

Table with 3 rows and 2 columns - rowspan
1st column spans all 3 rows
Source Code (HTML)  
  How it appears

<table border=3 cellpadding=5>
  <tr>
    <td rowspan=3>
      Content 1
    </td><td>
      Content 2
    </td>
  </tr><tr>
    <td>
      Content 3
    </td>
  </tr>
  <tr>
    <td>
      Content 4
    </td>
  </tr>
</table>
 

Content 1 Content 2
Content 3
Content 4

Table with 3 rows and 2 columns - valign
1st column spans all 3 rows
Source Code (HTML)  
  How it appears

<table border=3 cellpadding=5>
  <tr>
    <td rowspan=3 valign=top>
      Content 1
    </td><td>
      Content 2
    </td>
  </tr><tr>
    <td>
      Content 3
    </td>
  </tr>
  <tr>
    <td>
      Content 4
    </td>
  </tr>
</table>
 

Content 1 Content 2
Content 3
Content 4

Nested Tables
Table 1 = 1 row, 2 columns
Table 2 (Nested) = 2 rows, 2 columns

Source Code (HTML)  
  How it appears

<table border=3 cellpadding=10>
<tr>
  <td valign=top>
    Content 1
  </td><td>
    Content 2<p>
			
    <table border=1>
    <tr>
      <td>Content 3</td>
      <td>Content 4</td>
    </tr><tr>
      <td>Content 5</td>
      <td>Content 6</td>
    </tr>
    </table><p>
			
    Content 7
  </td>
</tr>
</table>
 

Content 1 Content 2

Content 3 Content 4
Content 5 Content 6

Content 7

Nested Tables - Variation
Table 1 = 1 row, 2 columns, bgcolor, no border
Table 2 = 2 rows, 2 columns, nested

Source Code (HTML)  
  How it appears

<table border=0 cellpadding=10 cellspacing=0>
<tr>
  <td align=center valign=top bgcolor="#ccccff">
    Content 1a<br>
    1b
  </td><td>
    <div align="center">Content 2a</div><p>
    Content 2b<br>
    Content 2c<p>
			
    <table border=1 cellpadding=5>
    <tr>
      <td>Content 3</td>
      <td>Content 4</td>
    </tr><tr>
      <td>Content 5</td>
      <td>Content 6</td>
    </tr>
    </table><p>
			
    Content 7
  </td>
</tr>
</table>
 

Content 1a
1b
Content 2a

Content 2b
Content 2c

Content 3 Content 4
Content 5 Content 6

Content 7

Sometimes tables are difficult to align.


^top of page^ | Search | Site Map | UseWisdom