Substitute symbol for text in table cells and maintain center alignment - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Table Cell

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Table Cell

Description

Substitute symbol for text in table cells and maintain center alignment

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <style>
table {<!-- w w w.  j av a 2  s .  c o  m-->
   border-collapse:collapse;
   font-size:25px;
   border:none;
   margin:2em 0;
}

table thead th {
   font-weight:bold;
   padding:0 2em;
}

table thead th.text {
   text-align:left;
}

table thead th.indicator {
   text-align:center;
}

table thead th:not(:first-child) {
   border-left:2px solid Chartreuse;
}

table tbody th,
table tbody td {
   padding:0.16em 2em;
   color:yellow;
   background-color:blue;
}

table tbody th {
   text-align:left;
   font-weight:normal;
}

table tbody td {
   border-left:2px solid pink;
}

table tbody td.text {
   text-align:left;
}

table tbody td.indicator {
   text-align:center;
}

table.ic thead th {
   color:OrangeRed;
   background-color:grey;
}

table.ic tbody tr:nth-child(odd) th,
table.ic tbody tr:nth-child(odd) td {
   background-color:BlueViolet;
}
</style> 
 </head> 
 <body> 
  <h1>Lorem ipsum d</h1> 
  <table class="ic"> 
   <thead> 
    <tr> 
     <th scope="col">Lorem i</th> 
     <th scope="col" class="indicator">Lore</th> 
     <th scope="col" class="indicator">Lore</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <th scope="row">Lorem ips</th> 
     <td class="indicator"> <span title="Affirmative">L</span> </td> 
     <td class="indicator"> <span title="No">L</span> </td> 
    </tr> 
    <tr> 
     <th scope="row">Lorem i</th> 
     <td class="indicator"> <span title="Affirmative">L</span> </td> 
     <td class="indicator"> <span title="Affirmative">L</span> </td> 
    </tr> 
    <tr> 
     <th scope="row">Lorem i</th> 
     <td class="indicator"> <span title="Affirmative">L</span> </td> 
     <td class="indicator"> <span title="No">L</span> </td> 
    </tr> 
    <tr> 
     <th scope="row">Lorem i</th> 
     <td class="indicator"> <span title="Affirmative">L</span> </td> 
     <td class="indicator"> <span title="Affirmative">L</span> </td> 
    </tr> 
    <tr> 
     <th scope="row">Lorem ip</th> 
     <td class="indicator"> <span title="No">L</span> </td> 
     <td class="indicator"> <span title="Affirmative">L</span> </td> 
    </tr> 
    <tr> 
     <th scope="row">Lorem </th> 
     <td class="indicator"> <span title="No">L</span> </td> 
     <td class="indicator"> <span title="Affirmative">L</span> </td> 
    </tr> 
    <tr> 
     <th scope="row">Lorem i</th> 
     <td class="indicator"> <span title="Affirmative">L</span> </td> 
     <td class="indicator"> <span title="Affirmative">L</span> </td> 
    </tr> 
   </tbody> 
  </table>  
 </body>
</html>

Related Tutorials