Adding Structure to a Table, Differentiating Between th Elements in a Table - HTML CSS HTML Tag

HTML CSS examples for HTML Tag:th

  1. HOME
  2. HTML CSS
  3. HTML Tag
  4. th

Description

Adding Structure to a Table, Differentiating Between th Elements in a Table

Demo Code

ResultView the demo in separate window 

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style>
            tr > th { text-align:left; background:grey; color:white}
            tr > th:only-of-type {text-align:right; background: lightgrey; color:grey}
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th>Rank</th><th>Name</th><th>Level</th><th>Size</th>
            </tr>
              <tr>
                  <th>Favorite:</th>
                  <td>CSS</td>
                  <td>HTML</td>
                  <td>SQL</td>
              </tr>
              <tr>
                  <th>2nd Favorite:</th>
                  <td>Java</td>
                  <td>C</td>
                  <td>C++</td>
              </tr>
              <tr>
                  <th>3rd Favorite:</th>
                  <td>Javascript</td>
                  <td>Python</td>
                  <td>Ruby</td>
              </tr>
        </table>
    </body>
</html><!-- w w w .  j a v  a 2 s .c  om-->

Related Tutorials