In this lecture we are going to be creating tables using HTML. When it comes to building web pages, it's very important to have a solid understanding of table structures. Tables allow us to organize data and content in an organized way. Table data is structured in the form of rows and columns. The intersection of a row with a column forms a table cell. The individual cells contain the actual data.
This example illustrates the structure of a basic table used to record the findings of a survey that asked respondents to list their favorite Sport.
Here we have a table with two columns and nine Rows, which gives us 18 individual cells.
Let's start off by creating this table in a standard HTML 5 Document.
Open your text editor, and let's setup the basic HTML page structure.
By now this should all look familiar, and as you guessed, the code block for our table will be inserted in between the
Next, we will insert our open and close table tags.
The table tag also has several attributes.
<table width="100%" border="1" bordercolor=â€blueâ€ cellspacing="2" cellpadding="2">
First we can specify the width of the table. For now, we will put the width as 100%. We will come back to the width attribute once we have our table created, because there are different ways the width can be stated.
Next we can set a border for our table. Let's set the border to 1 pixel. You can increase this value for a thicker border, or put 0 for no border.
We can aslo put a
bordercolor attribute. We will set it to blue.
Next, we can specify the cellspacing and cellpadding attributes.
This illustration provides a visual example of what each of these mean:
Once we have defined these attributes we can start adding rows and columns. Each row is defined by the
<tr><tr> tags and the columns are defined by the
The columns must be situated within the
After we have finished adding each row and column, we can close the table
<table width="100%" border="1" bordercolor=â€blueâ€ cellspacing="2" cellpadding=
With the table created, let's save the file and preview it in our web browser, to see the final result.
One thing you may have noticed, is the table is the full width of the browsers content area. This is because we specified a table width of 100%.
You will notice that as we change the size of the browser window, the table contacts and expands but always maintains 100% of the browser window.
Let's see what happens if we change the width to 50%. As you would expect, the table is now 50% of the browsers content area.
But what if we wanted the table to be a fixed width, so that it does not expand and contract with the browser window.
For that we will need to change the width, from a percentage to a fixed value (in pixels). Lets change the width from 100%, to 500 pixels.
Now let's save our changes, and preview the page in our browser. With the fixed table width, the table no longer expands and contracts with the browser. It stays the same size.