Analyzing a Table

In general, the Document Object Model reflects exactly what the HTML document includes. Every HTML tag is represented by a tag node on the DOM and every textual entry becomes a text node on the DOM. This WYSIWYG principle is violated in one case: the <TABLE> tag. The deviation is that the <TABLE> tag pair behaves as if it encloses another tag pair: the <TBODY> tag pair. Let's look at a particular table:

     <TABLE ID="tableNode">
         <TR><TD BGCOLOR="yellow">This is row 1, cell 1</TD>
           <TD BGCOLOR="orange">This is row 1, cell 2</TD></TR>
         <TR><TD BGCOLOR="red">This is row 2, cell 1</TD>
           <TD BGCOLOR="magenta">This is row 2, cell 2</TD></TR>
         <TR><TD BGCOLOR="lightgreen">This is row 3, cell 1</TD>
           <TD BGCOLOR="beige">This is row 3, cell 2</TD></TR>
     </TABLE>

In order to synthesize the the Document Object Model, you have to imagine that the HTML code includes the <TBODY> tag pair:

     <TABLE ID="tableNode">
     <TBODY>
         <TR><TD BGCOLOR="yellow">This is row 1, cell 1</TD>
           <TD BGCOLOR="orange">This is row 1, cell 2</TD></TR>
         <TR><TD BGCOLOR="red">This is row 2, cell 1</TD>
           <TD BGCOLOR="magenta">This is row 2, cell 2</TD></TR>
         <TR><TD BGCOLOR="lightgreen">This is row 3, cell 1</TD>
           <TD BGCOLOR="beige">This is row 3, cell 2</TD></TR>
     <TBODY>
     </TABLE>

In fact, you can also leave this <TBODY> tag pair in your HTML document and it will behave exactly as if it is not included.

By now, you probably have an idea how the DOM will look like for the <TABLE> tag. Follow the DOM drawing to find out the tree structure of the table. The tree root is the <TABLE> tag. It has a single child, the <TBODY> tag. The <TBODY> tag has three children, one for every table row. Each <TR> node has two children, one for every cell of the row. Each <TD> tag has one child text node which includes the content of the cell.