Table: Multiple

To define a special style for one of multiple tables on a webpage, add an id attribute to the <table> tag in the body element:

<table id="IDname">

Then in the <style> element, define the CSS styling for that special table:

table#IDname { width: 100%;
    background-color: #f1f1c1; }
HTML file: Displayed by browser:
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    text-align: left;
}
table#t01 {
    width: 100%;
    background-color: #f1f1c1;
}
</style>
<h3>Standard Table</h3>
<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>
<h3>Special Table</h3>
<table id="t01">
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>













Standard Table

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
John Doe 80














Special Table

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
John Doe 80

Back button Table of Contents Next button