HTML Tutorial - HTML Table








There are three elements that every table must contain: table, tr, and td.

table

table with local attributes border marks a table in an HTML document.

table element can have caption, colgroup, thead, tbody, tfoot, tr, th, and td elements.

The summary, align, width, bgcolor, cellpadding, cellspacing, frame, and rules attributes for table element are obsolete.

The value of the border attribute must be 1. The thickness of the border must then be set using CSS.

tr

tr element denotes a table row.

HTML tables are row oriented and you must denote each row separately.

tr element can be used inside table, thead, tfoot, and tbody elements.

tr element can contains one or more td or th elements.

The align, char, charoff, valign, and bgcolor attributes are obsolete. You must use CSS instead.





td

td with colspan, rowspan, headers local attributes denotes a table cell.

The scope attribute is obsolete. Use the scope attribute on the th element instead.

The abbr, axis, align, width, char, charoff, valign, bgcolor, height, and nowrap attributes are obsolete, and you must use CSS instead.

Example

You can combine them to create tables, as shown in the following code.

<!DOCTYPE HTML>
<html>
<body>
  <table>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr><!--from ww w  . ja v  a2s  .  c o  m-->
    <tr>
      <td>D</td>
      <td>E</td>
      <td>F</td>
    </tr>
  </table>
</body>
</html>

Click to view the demo





Example: longer cell

Adding Some Longer Cell Content

<!DOCTYPE HTML>
<html>
<body>
  <table>
    <tr>
      <td>A</td>
      <td>G</td>
      <td>M</td>
    </tr><!--from   w  w  w .ja v a2 s  .  c  om-->
    <tr>
      <td>O</td>
      <td>O</td>
      <td>L</td>
    </tr>
    <tr>
      <td>E</td>
      <td>Long cell</td>
      <td>V</td>
    </tr>
  </table>
</body>
</html>

Click to view the demo

thead - Table Header Wrapper

The thead element defines one or more rows that are the column labels for a table element.

Without the thead element, all of your tr elements are assumed to belong to the body of the table.

The align, char, charoff, and valign attributes are obsolete.

The following code shows the addition of the thead element to the example table.

<!DOCTYPE HTML>
<html>
<head>
<style>
thead th {<!--from   w ww. ja  v a2s.  c o  m-->
  text-align: left;
  background: grey;
  color: white
}

tbody  th {
  text-align: right;
  background: lightgrey;
  color: grey
}
</style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>Favorite:</th>
        <td>XML</td>
        <td>HTML</td>
        <td>CSS</td>
      </tr>
      <tr>
        <th>2nd Favorite:</th>
        <td>Java</td>
        <td>Javascript</td>
        <td>Oracle</td>
      </tr>
      <tr>
        <th>3rd Favorite:</th>
        <td>C#</td>
        <td>MySQL</td>
        <td>PHP</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Click to view the demo

th - Table Header Cell

The th element marks a header cell, allowing us to differentiate between data and its descriptions.

th element's parent is tr element. It has local Attributes:colspan, rowspan, scope, headers.

The abbr, axis, align, width, char, charoff, valign, bgcolor, height, and nowrap attributes are obsolete, and you must use CSS instead.

The following code adds header cells to a table.

<!DOCTYPE HTML>
<html>
<body>
  <table>
    <tr>
      <th>Rank</th>
      <th>Name</th>
      <th>Color</th>
      <th>Size</th>
    </tr><!-- www  . ja v a2s  .  c  o  m-->
    <tr>
      <th>Favorite:</th>
      <td>Apples</td>
      <td>Green</td>
      <td>Medium</td>
    </tr>
    <tr>
      <th>2nd Favorite:</th>
      <td>Oranges</td>
      <td>Orange</td>
      <td>Large</td>
    </tr>
    <tr>
      <th>3rd Favorite:</th>
      <td>Pomegranate</td>
      <td>A kind of greeny-red</td>
      <td>Varies from medium to large</td>
    </tr>
  </table>
</body>
</html>

Click to view the demo

The th and td elements are mixed together in a row. It adds vertical header and row header to the table.

tbody - Table Body

The tbody element marks the rows for table body as opposed to the header and footer rows.

The align, char, charoff, and valign attributes are obsolete.

Most browsers automatically insert the tbody element when they process a table element, even if it has not been specified in the document. CSS selectors that depend on table layout as written can fail.

For example, a selector such as table > tr won't work, because the browser has inserted a tbody element between the table and tr elements.

To address this, you must use a selector such as table > tbody > tr, table tr (no > character), or even just tbody > tr.

The following code shows the addition of tbody element to the example table.

<!DOCTYPE HTML>
<html>
<head>
<style>
thead th {<!-- w ww .  j av a 2s . com-->
  text-align: left;
  background: grey;
  color: white
}

tbody  th {
  text-align: right;
  background: lightgrey;
  color: grey
}
</style>
</head>
<body>
  <table>
    <tbody>
      <tr>
        <th>Favorite:</th>
        <td>XML</td>
        <td>HTML</td>
        <td>CSS</td>
      </tr>
      <tr>
        <th>2nd Favorite:</th>
        <td>Java</td>
        <td>Javascript</td>
        <td>Oracle</td>
      </tr>
      <tr>
        <th>3rd Favorite:</th>
        <td>C#</td>
        <td>MySQL</td>
        <td>PHP</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Click to view the demo

The tfoot element marks the table footer.

The tfoot element can appear before or after the tbody or tr elements.

The align, char, charoff, and valign attributes are obsolete.

Prior to HTML5, the tfoot element had to appear before the tbody element.

In HTML5, you can put the tfooter element after the tbody or the last tr element.

The following code shows how the tfoot element can be used to create a footer for a table element.

<!DOCTYPE HTML>
<html>
<head>
<style>
thead th, tfoot th {<!--from ww w.  ja  va2  s  . c o m-->
  text-align: left;
  background: grey;
  color: white
}

tbody  th {
  text-align: right;
  background: lightgrey;
  color: grey
}
</style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>Rank</th>
        <th>Name</th>
        <th>Color</th>
        <th>Size</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <th>Rank Footer</th>
        <th>Name Footer</th>
        <th>Color Footer</th>
        <th>Size Footer</th>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <th>Favorite:</th>
        <td>XML</td>
        <td>HTML</td>
        <td>CSS</td>
      </tr>
      <tr>
        <th>2nd Favorite:</th>
        <td>Java</td>
        <td>Javacript</td>
        <td>Oracle</td>
      </tr>
      <tr>
        <th>3rd Favorite:</th>
        <td>Json</td>
        <td>Text</td>
        <td>CSV</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Click to view the demo