Labels

Saturday, January 8, 2011

HTML Table Tag

The table tag <table>  is used to create tables with rows and columns. A table is divided into rows and columns. The <tr> tag represents table rows and the <td> tag represents table data columns.

A simple example of a table with 2 rows and 3 columns:

<table border="1">
   <tr>
      <td>Row 1, Column 1</td>
      <td>Row 1, Column 2</td>
      <td>Row 1, Column 3</td>
   </tr>
   <tr>
      <td>Row 2, Column 1</td>
      <td>Row 2, Column 2</td>
      <td>Row 2, Column 3</td>
   </tr>
</table>

The output will look like below:

Row 1, Column 1 Row 1, Column 2 Row 1, Column 3
Row 2, Column 1 Row 2, Column 2 Row 2, Column 3

You will notice I added border="1" to the table tag.  If you do not specify any table attributes, the border by default will be 0 and in the table above, you would not see any border around the cells.

One other simple thing you should be aware about tables, is that you can have table headers.  See example below:

<table border="1">
   <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
   </tr>
   <tr>
      <td>Row 1, Column 1</td>
      <td>Row 1, Column 2</td>
      <td>Row 1, Column 3</td>
   </tr>
   <tr>
      <td>Row 2, Column 1</td>
      <td>Row 2, Column 2</td>
      <td>Row 2, Column 3</td>
   </tr>
</table>

The above code will generate this outcome:
Header 1 Header 2 Header 3
Row 1, Column 1 Row 1, Column 2 Row 1, Column 3
Row 2, Column 1 Row 2, Column 2 Row 2, Column 3

Friday, January 7, 2011

HTML Basics

People ask me all the time for help with HTML, so I decided to create this blog where I can post my tips.  First thing I want to cover is the basics of HTML.  HTML for those who don't know stands for Hyper Text Markup Language. HTML is really not a programming language, but a markup language, and what this means, it's a set of markup tags, used to describe a web page.  These tags are usually called HTML tags.

HTML tags usually come in pairs, an start tag and a end tag or opening and ending tags.

Here's an example of a very basic HTML page, aka a web page.

<html>
    <body>
      <h1>Welcome to my page</h1>
      <p>This is my paragraph.</p>
   </body>
</html>

Easy right? <html> is the start tag and </html> is the end tag.  All this means, is that this page is an html page, hence a web page.  Try it yourself, and save the file with .html extension and then view the file in a web browser.