htmlcss-tables

HTML Table with Column and Row headers

Trying to code table with column and row header, my output is printing Column headers starting from Col2 Row1 and Row headers starting from Col1 Row2 (Col1 Row1 is empty). I need current column header start from Col1 Row1. My html code is:

<table>
  <caption>Volumes Consumption</caption>
  <tr>
    <td></td>
    <th scope="col">Performance Tier
    </th>
    <th scope="col">Contracted Value</th>
    <th scope="col">Consumed Value</th>
    <th scope="col">Contract Numbers</th>
  </tr>
  <tr>
    <th scope="row">Extreme-MC</th>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
  </tr>
  <tr>
    <th scope="row">Premium-MC</th>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
  </tr>
  <tr>
    <th scope="row">Premium</th>
    <td>3</td>
    <td>3</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <th scope="row">Value</th>
    <td>4</td>
    <td>4</td>
    <td>4</td>
    <td>4</td>
  </tr>

Solution 

  • <table>
  <caption>Volumes Consumption</caption>
  <tr>
    <th scope="col">Performance Tier</th>
    <th scope="col">Contracted Value</th>
    <th scope="col">Consumed Value</th>
    <th scope="col">Contract Numbers</th>
  </tr>
  <tr>
    <th scope="row">Extreme-MC</th>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
  </tr>
  <tr>
    <th scope="row">Premium-MC</th>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
  </tr>
  <tr>
    <th scope="row">Premium</th>
    <td>3</td>
    <td>3</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <th scope="row">Value</th>
    <td>4</td>
    <td>4</td>
    <td>4</td>
    <td>4</td>
  </tr>
</table>

    If I understood it right, this should be your missing piece. I have just removed <td></td> from the very beginning, <tr> <td></td> <th scope="col">Performance Tier </th>