CS 100 (Learn) — CS 100 (Web) — Module 07

HTML :: Tables

The final HTML element we will use is the <table> element.

To illustrate a <table>, we will provide an example:

<table border="1">
  <tr> <td> <b>x</b> <td> <b>2</b> <td> <b>3</b> <td> <b>4</b>
  <tr> <td> <b>5</b> <td> 10       <td> 15       <td> 20
  <tr> <td> <b>6</b> <td> 12       <td> 18       <td> 24  
  <tr> <td> <b>7</b> <td> 14       <td> 21       <td> 28
</table>

A <table> is made up of several table rows (<tr>). Each table row is made up of several table data elements (<td>).

The <tr> and <td> tags are each paired tags, so we could have added </tr> and </td> tags in our table, but they are optional.

The table border attribute determines if a border is displayed (it is either on "1" or off "0"). The default is "0":

<table>
  <tr> <td> <b>x</b> <td> <b>2</b> <td> <b>3</b> <td> <b>4</b>
  <tr> <td> <b>5</b> <td> 10       <td> 15       <td> 20
  <tr> <td> <b>6</b> <td> 12       <td> 18       <td> 24  
  <tr> <td> <b>7</b> <td> 14       <td> 21       <td> 28
</table>

A <td> element can also span over multiple columns (or rows) with a colspan attribute (or rowspan).

<table border="1">
  <tr> <td colspan="4"> Multiplication
  <tr> <td> <b>x</b> <td> <b>2</b> <td> <b>3</b> <td> <b>4</b>
  <tr> <td> <b>5</b> <td> 10       <td> 15       <td> 20
  <tr> <td> <b>6</b> <td> 12       <td> 18       <td> 24  
  <tr> <td> <b>7</b> <td> 14       <td> 21       <td> 28
</table>