Constructing Tables in HTML

In your web1 folder there is a file called tablecells.html. Open this file with Dreamweaver CS6.

From the same folder also open the GIF images tablemodel.gif.

tablecells.html has the first row of a table constructed with HTML. tablemodel.gif shows what the completed table should look like.

  • Be aware that the open table tag <table> needs a close table tag </table>
  • Each open table row tag <tr> needs a close table row tag </tr>
  • And each table cell tag <td> needs a close table cell tag </td>
  • Mr. Machtay will explain “NESTING TAGS” — first in, last out.
  • Mr. Machtay will explain the Attributes “rowspan” and “colspan”
  • The first row has 5 columns (and only one row). The second row has two cells that each span two columns (therefore need colspan=”2″ in the table cell tags) and one cell that spans two rows (therefore needs rowspan=”2″ in the table cell tag)
  • Mr. Machtay will take the class through constructing the second row of the table. Students will then proceed from there. Do the best job you can of constructing the entire table.
  • Then go to index.html. Add another link to the list of links under “Stylesheets.html” add link for “Tablecells.html”