Introduction to HTML and CSS Part 3

Hello and welcome to the 3rd installment of my HTML and CSS tutorial’s. Today we are going to cover Tables. It can become complicated but is also really easy to use if you want to use a traditional way to present information in a web page.

Now there is a lot of different tags and ways to format a table, so let’s get into it.

To start this off we will name the most common tags within a table:

  • <table> this is to denote the start of a table
  • <tr> this is a table row
  • <td> this is table data
  • <caption> to define a caption for a table this must follow directly after the opening table tag
  • <colgroup> this defines the column groupings for the table
  • <thead> this defines the heading section for a table. Often the first table heading row spans the entire width of the table. This then followed by a second row of individual headings for each column in the table.
  • <tbody> This identify actual content for the table. A table can have multiple <tbody> elements.
  • <tfoot> This provides the information for the bottom of a table. There are specifics where this can be placed and where it can’t be placed. it can be placed (in this order) <caption>,<colgroup> and <thead>. it would appear before <tbody> and <tr>. In a special case <tfoot> cannot appear at the end of the table!
  • If no <tbody> is present the <tr> defines rows for the data that the table presents.

Let’s take a look at what a simple table would look like:

table1

This is a good example of how to set up a table. The image below shows what it looks like in your browser:

table2

The final thing to learn about tables is how to decorate them.

<thead> has the following attributes to include within the <thead……>

  • caption: shows a caption for the table
  • colgroup: specifies properties for  a group of columns within the table. Use the col element within colgroup to specify certain columns
  • thead: defines overall container for head
  • tr: identifies each row of content
  • th or td: use th for bold center column heads and td for plain left-justified heads.

Here is what it looks like in HTML:

table3

Here is what it looks like in your browser:

table4

So that is the wonderful world of Tables in HTML 5!

If you have any questions please feel free to ask away in the comments below!

Until Next time!

Looking for quality phpBB Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , , | Posted under Programming/Coding | RSS 2.0

Author Spotlight

Keith Pottratz

Keith Pottratz

Hello My Name is Keith Pottratz. I have been working with computers for over a decade. It's my personal hobby something that I love and enjoy doing. I went to school for Computer Science, and have spent many years self teaching my self various things. I have ton's of experience in HTML,CSS, PHPBB,CPanel,CMS software, blogging software and various other systems and enviroments. My favorite thing to do though is backend developing. I find it to be a growing and ever evolving beast and I love learning about it. I look forward to giving as much knowledge as I can and help.

Leave a Reply

Your email address will not be published. Required fields are marked *


3 × 4 =

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>