An Introduction To Tables
We need a way to show tabular data on our web pages in neat rows and columns, possibly with headers and footers. We can do this in HTML using the <table ></table> element. This element has several tags associated with it and numerous attributes available to alter the table dynamics.
The Table Caption Element
The Table Element
The Table Data Cell Element
The Table Header Cell Element
The Table Row Element
Creating A Webpage
Lets create a webpage for our tables tags to see what they do!
- Open up your HTML editor or text editor, which in my case is Notepad++.
- Open a document if required.
- Copy and paste the following code into the document.
<!DOCTYPE html> <!-- Using the caption, table, td, th and tr HTML tags --> <html lang="en"> <head> <title> An Introduction To Tables </title> </head> <body> <h2>Using Tables</h2> <table> <caption>Simple Table</caption> <tr> <td>Banana</td> <td>Yellow</td> </tr> <tr> <td>Pea</td> <td>Green</td> </tr> </table> <hr> <table> <caption>Table With Headers</caption> <tr> <th>Fruit</th> <th>Colour</th> </tr> <tr> <td>Banana</td> <td>Yellow</td> </tr> <tr> <td>Pea</td> <td>Green</td> </tr> </table> </body> </html>
Saving the document
Save the file as
View Page in Web Browser
Either navigate to the location you saved the
tables.htmlfile to and double click the file. This will take you to the page in your default web browser, or from your web browser click File --> Open File and navigate to the file and open it.
After doing either of these you should see a similar webpage in your browser to the following screenshot:
As you can see from the screenshot the image shows two rows of data separated by a horizontal rule. Although they don't look very tabular these two rows of data are HTML tables without any CSS to make them look good.
There are several things going on that might not be immediately noticeable.
The <caption> tag centers the content within the confines of the table.
The <tr> tag places the content on a new line.
The <th> tag centers and renders the content in bold type.
The <td> tag adjusts the width of all table cells to the longest cell and the text is left aligned.
Lesson 9 Complete
Modify the HTML and maybe create your own tables to become confident with table usage.
Until now we haven't seen how a user can enter information onto the web page. We can do this using the <form> tag and this is the topic of the next tutorial.
The <caption> table caption tag
The <table> table tag
The <td> table data cell tag
The <th> table header cell tag
The <tr> table row tag