Applying CSS based on ID


To define a special style for a specific table or to apply CSS based on some unique identifier, add an ID attribute to the table:

Sample 01A Special Style for each Table

<html>
<head>
<title>Selective Formatting</title>
<style>
table,th,td
{
    border: 1px solid black;
    border-collapse: collapse;
    padding: 5px;
}
table#tab01
{
    background-color: HoneyDew;
}
table#tab02
{
    width: 100%;   
    background-color: Turquoise;
}
</style>
</head>
<body>

<table id="tab01" style="width:auto;">
  <tr>
    <th>First Name</th>
    <th>Last Name</th>          
    <th>Salary</th>
  </tr>
  <tr>
    <td>Sheik Abdullah</td>
    <td>Saleem</td>              
    <td>9000</td>
  </tr>
  <tr>
    <td>Kavitha</td>
    <td>Marimuthu</td>          
    <td>6000</td>
  </tr>
  <tr>
    <td>Lakshmi</td>
    <td>Priya</td>         
    <td>7000</td>
  </tr>
</table>

<br>

<table id="tab02" style="width:auto;">
  <tr>
    <th>First Name</th>
    <th>Last Name</th>          
    <th>Salary</th>
  </tr>
  <tr>
    <td>Sheik Abdullah</td>
    <td>Saleem</td>              
    <td>9000</td>
  </tr>
  <tr>
    <td>Sameena</td>
    <td>Banu</td>            
    <td>7000</td>
  </tr>
  <tr>
    <td>Sameeha</td>
    <td>Furzana</td>           
    <td>7000</td>
  </tr>
</table>

</body>

</html>

Check Output

No comments:

Post a Comment