October 22, 2011

HTML- Creating a Basic Table

As what has been said a while ago, tables are useful in presenting and structuring data. It allows the visitor to find the needed information quickly and easily. Below is an example of basic table.



The code below is used in creating the table above.

<html>
<head>
<title>Tables</title>
</head>
<body>
Ubuntu Versions:
<table>
<tr> <th>Code Name</th>  <th>Version</th></tr>
<tr> <td>Maverick Meerkat</td> <td>10.10</td> </tr>
<tr> <td>Lucid Lynx</td> <td>10.04</td>  </tr>
<tr> <td>Karmic Koala</td> <td>9.10</td>   </tr>
<tr> <td>Jaunty Jackalope</td> <td>9.04</td>   </tr>
</table>
</body>
</html>


As you can see, the code is written with several spaces so that it would be easy for you to understand the components of the table.

About the code:
  • The <table> tag tells the browser that what follows is a table.
  • The <tr> tag which means “table row” is used in creating the rows of the table. In our example we have five rows created using the opening tr tag and closing tr tag.
  • The <th> tag tells the browser that the cell content is a header. It will be rendered by the browser in boldface. The <th> tag should be closed with </th>.
  • The <td> tag which means “table data” is used in creating columns. It is also used to mark up individual cells. </td> tells the browser that table data cell has ended.
  • The </table> is the closing tag for table, it is used to tell the browser that the table element has ended.

2 comments:

Donna || HEYLADYSPRING.COM said...

Table html is still the most frustrating to me. So many definitions! And I only use this when I need to organize a lot of info which makes me cry in frustration every time because that means I will have to spend a lot of hours making sure I don't miss out any closures :/

Unknown said...

Thanks for this, now I just have to combine this with the insert image html code to make grid-matrix-images thing.