Bright Java Tutorial

is brought to you by DoITBright LLC

HTML

Table Rows and Columns

There are times when we have data that are best presented in a spread sheet style. This means, we will need to display it using a table with multiple rows and columns. A good example to this is we have a list of students and we want to display in our HTML page each student's student id, first name and last name. In order for us to accomplish such thing, we will need to use the <table> tag. Let us look at the example below.

  <html>
    <head>
      <title>Table Rows And Columns in HTML</title>
    </head>
    <body>
      <table>
        <tr>
          <td>STUDENT ID</td>
          <td>FIRST NAME</td>
          <td>LAST NAME</td>
        </tr>
        <tr>
          <td>100000</td>
          <td>Andres</td>
          <td>Bonifacio</td>
        </tr>
        <tr>
          <td>100001</td>
          <td>Jose</td>
          <td>Rizal</td>
        </tr>
        <tr>
          <td>100002</td>
          <td>Antonio</td>
          <td>Luna</td>
        </tr>
      </table>
    </body>
  </html>
                           
Let us examine the code above. The <table> tag is matched by </table>. In between the above mentioned tags, we will find <tr> and </tr> tags. For every occurrence of these tags, it will mean a row of data. In between the <tr> and </tr> tags, we will find the multiple occurrence of <td> and </td> tages. As you may have guessed, these tags represents the columns for that specific row. Using the example above, we can observe that the first row is dedicated as the table column headers, which means, meaningful names to describe the data will represent. There is a more effective way of doing this in HTML. Let us replace all the <td> and </td> from the first row to <th> and </th>. Aside from that, let us add the attribute 'boarder="1"' at the <table> tag. Your HTML code should now look like this...

  <html>
    <head>
      <title>Table Rows And Columns in HTML</title>
    </head>
    <body>
      <table border="1">
        <tr>
          <th>STUDENT ID</th>
          <th>FIRST NAME</th>
          <th>LAST NAME</th>
        </tr>
        <tr>
          <td>100000</td>
          <td>Andres</td>
          <td>Bonifacio</td>
        </tr>
        <tr>
          <td>100001</td>
          <td>Jose</td>
          <td>Rizal</td>
        </tr>
        <tr>
          <td>100002</td>
          <td>Antonio</td>
          <td>Luna</td>
        </tr>
      </table>
    </body>
  </html>
                           
Did you notice the difference? The column names have a bolder text which makes them more noticeable.


Back    Next