Lesson 3 - Tables in HTML
Page Views: 110
|
Lesson 3 – Tables
Part 1. We are going to continue to explore tables in HTML. We are going to start with a brand new webpage.
Click on Start > Notepad++. In Notepad++ click File > New. Let’s start by adding the HTML and BODY tags. Make sure that the BODY tags are tabbed over from the HTML tags. Your code should look similar to this:
<HTML>
<BODY>
</BODY>
</HTML>
Part2. Save this as Lesson 3. Click File > Save As.
Type Lesson3.html for File Name.
Select HTML File for the Save as type. Make sure you save it to your network drive. Click Save.
Open up your webpage along with your code.
Click Start > Documents > My Documents. Select your Network Drive. Double click Lesson3.html to open it. It should open up in a browser. The webpage should be blank.
Part 3. Click back on Notepad++. We are going to add a table. Add the TABLE, TR, and TD tags. Remember to tab the tags over, so your code looks like this:
<HTML>
<BODY>
<TABLE>
<TR>
<TD>
</TD>
</TR>;
</TABLE>
</BODY>
</HTML>
r>
Part4. With the TABLE, TR, and TD tags you can only put text and stuff inside the TD tags. Let's type some text inside the TD tags. In between the TD tags type "row 1, column 1". Make sure you tab the text over. Your code should look like this:
<TR>
<TD>
row 1, column 1
</TD>
</TR>
Part 5. Click File > Save in Notepad++. Click on your webpage in the browser and hit F5 key to refresh it. You should see the words row 1, column 1 on the page.
Part 6. Let's make the TABLE BORDER visible. Let's also make the table a little wider. In the opening TABLE tag type BORDER="1" and WIDTH="50%". Your code should look like this:
<TABLE BORDER="1" WIDTH="50%">
Part 7. Click File > Save in Notepad++. Click on your webpage in the browser and hit F5 key to refresh it. You should now be able to see the table border.
Part 8. In order to help you understand the difference between rows and columns we'll continue to add rows and columns and label them in HTML code. Rows go horizontal (left and right). Columns go vertical (up and down). With HTML code in order to add another row , you have to add another set of TR tags within the table. In order to add another column, you have to add another set of TD tags within a set of TR tags.
Let's add another column. If you're paying attention you know this means we'll have to add another set of TD tags within the TR tags. Go ahead and add a set of TD tags inside the TR tags. Make sure you tab over. Your code should look like this:
<TABLE BORDER="1" WIDTH="50%">
<TR>
<TD>
row 1, column 1
</TD>
<TD>
</TD>
</TR>
</TABLE>
Part9. Let's type some text inside the new TD tags. In between the new TD tags type "row 1, column 2". Make sure you tab the text over. Your code should look like this:
<TABLE BORDER="1" WIDTH="50%">
<TR>
<TD>
row 1, column 1
</TD>
<TD>
row 1, column 2
</TD>
</TR>
</TABLE>
Part10. Click File > Save in Notepad++. Click on your webpage in the browser and hit the F5 key to refresh it. There should now be two columns in the first row. Let's add another column to the first row. After the second column (second set of TD tags), type in another set of TD tags. Make sure you tab over. Your code should look like this:
<TR>
<TD>
row1, column 1
</TD>
<TD>
row 1, column 2
</TD>
<TD>
</TD>
</TR>
Part11. Let's type some text inside the new TD tags. In between the new TD tags type "row 1, column 3". Make sure you tab the text over. Your code should look like this:
<TR>
<TD>
row 1, column 1
</TD>
<TD>
row 1, column 2
</TD>
<TD>
row 1, column 3
</TD>
</TR>
Part 12. Click File > Save in Notepad++. Click on your webpage in the browser and hit F5 to refresh it. There should now be three columns in the first row. Let's add another row to this table. To add another row you have to add another set of TR and TD tags. Add another row below the first. Make sure you tab the TD tags over, so your code looks like this:
<TR>
<TD>
row 1, column 1
</TD>
<TD>
row 1, column 2
</TD>
<TD>
row 1, column 3
</TD>
</TR>
<TR>
<TD>> </TD>
</TR>
Part13. Click File > Save in Notepad++. Click on your webpage in the browser and hit F5 to refresh it. You should notice that you can't really see the second row very well. This is because usually every row needs to have the same number of columns. Right now the first row has three columns and the second row only has one column. To see this more clearly, type "row 2, column 1" in the second row. Make sure you tab over. Your code should look like this:
<TR>
<TD>
row 1, column 1
</TD>
<TD>
row 1, column 2
</TD>
<TD>
row 1, column 3
</TD>
</TR>
<TR>
<TD>> row2, column 1
</TD>
</TR>
Part 14. Click File > Save in Notepad++. Click on your webpage in the browser and hit F5 to refresh it. You should see the first row with three columns and the second row with one column. Let's add two more columns to the second row. Add two more sets of TD tags in the second row. Your code should look like this:
<TR>
<TD>
row 1, column 1
</TD>
<TD>
row 1, column 2
</TD>
<TD>
row 1, column 3
</TD>
</TR>
<TR>
<TD>> row2, column 1
</TD>
<TD>
</TD>
<TD><br> </TD>
</TR>
Part15. Let's label the new TD tags. In the second row in the second set of TD tags, type "row 2, column 2". In the second row in the last set of TD tags, type "row 2, column 3". Make sure you tab over. Your code should look like this:
<TR>
<TD>
row 1, column 1
</TD>
<TD>
row 1, column 2
</TD>
<TD>
row 1, column 3
</TD>
</TR>
<TR>
<TD>> row2, column 1
</TD>
<TD>
row 2, column 2
</TD>
<TD>
row 2, column 3
</TD>
</TR>
Part 16. Click File > Save in Notepad++. Click on your webpage in the browser and hit F5 to refresh it. You should now see two rows, each with three columns. Let's make another table below our existing table. On the next line after the closing TABLE tag, add three BR tags, so we'll have some space in between the two tables. Remember that the closing TABLE tag is the one with the backslash in it. Your code should look like this:
</TABLE>
<BR><BR><BR>>
Part17. On the next line after the BR tags add the TABLE, TR, and TD tags. Remember to tab the tags over, so your code looks like this:
</TABLE>
<BR><BR><BR>
<;TABLE>
<TR>
<TD>
</TD>
</TR>
</TABLE>
Part18. Let's label this table as well. In between the TD tags add the text "row 1, column 1". Also, add the BORDER attribute in your opening TABLE tag and set it to 1. Your code should look like this:
<TABLE BORDER="1">
<TR>
<TD>
row 1, column 1
</TD>
</TR>
</TABLE>
Part19. Let’s add another row to this table, to help you see the difference between rows and columns. Remember, anytime you add a set of TR tags, you have to add a set of TD tags inside them. After the TR tag, add another set of TR and TD tags, so your code looks like this:
<TR>
<TD>
row 1, column 1
</TD>
</TR>
<TR>
<TD>> </TD>
</TR>
Part20. Let’s label the new row. In between the new TD tags add the text “row 2, column 1”. Your code should look like this:
<TR>
<TD>
row 1, column 1
</TD>
</TR>
<TR>
<TD>> row2, column 1
</TD>
</TR>
Part 21. Let’s add another row to this table. After the last TR tag, add another set of TR and TD tags, so your code looks like this:
<TR>
<TD>
row 1, column 1
</TD>
</TR>
<TR>
<TD>> row2, column 1
</TD>
</TR>
<TR>
<TD>> </TD>
</TR>
Part22. Let’s label the new row. In between the new TD tags add the text “row 3, column 1”. Your code should look like this:
</TR>
<TR>
<TD>
row 3, column 1
</TD>
</TR>
Part 23. Click File > Save in Notepad++. Click on your webpage in the browser and hit F5 to refresh it. You should now see two tables. The top table should have two rows and three columns, and the bottom table should have three rows and one column. Hopefully, by looking at the webpage in the browser, you will have a better understanding of rows versus columns. Let’s make one more table. After the last closing TABLE tag, type three BR tags. Your code should look like this:
</TABLE>
<BR><BR><BR>
Part 24. On the next line after the BR tags add the TABLE, TR, and TD tags. Remember to tab the tags over, so your code looks like this:
</TABLE>
<BR><BR><BR>
<;TABLE>
<TR>
<TD>
</TD>
</TR>
</TABLE>
Part25. Let's label this table as well. In between the TD tags add the text "row 1, column 1". Also, add the BORDER attribute in your opening TABLE tag and set it to 1. Your code should look like this:
<TABLE BORDER="1">
<TR>
<TD>
row 1, column 1
</TD>
</TR>
</TABLE>
Part26. Click File > Save in Notepad++. Click on your webpage in the browser and hit F5 to refresh it. You should now see three tables. Let’s add another column to the last table. After the TD tags, add another set of TD tags and add the text “row 1, column 2” in between them. Your code should look like this:
<TR>
<TD>
row 1, column 1
</TD>
<TD>
row 1, column 2
</TD>
</TR>
Part 27. Click File > Save in Notepad++. Click on your webpage in the browser and hit F5 to refresh it. The last table should now have one row with two columns. Let’s add a second row. After the TR tags add another set of TR and TD tags. Your code should look like this:
<TR>
<TD>
row 1, column 1
</TD>
<TD>
row 1, column 2
</TD>
</TR>
<TR>
<TD>> </TD>
</TR>
Part28. Add the following text inside the new TD tags. “Technically this is row 2, column 1”. Your code should look like this:
<TR>
<TD>
Technically this is row 2, column 1
</TD>
</TR>
Part 29. Click File > Save in Notepad++. Click on your webpage in the browser and hit F5 to refresh it. The last table should now look kind of messed up, and should have two rows. HTML rules state that each row has to have the same number of columns. This is not the case with our last table. The first row has two columns, but the second row only has one column. This is technically an error in HTML code. The browser tries to do its best to make the table look right, but it still doesn’t look completely normal.
HTML does allow rows to have different numbers of columns, but only if you use the attribute COLSPAN in the TD tag. COLSPAN stands for Column span.
Since the top row has two columns and the bottom row only has one, we’ll use the COLSPAN attribute in the opening TD in the bottom row. We’ll set the COLSPAN attribute to “2” because the bottom row needs to span two columns. This will allow the bottom row’s column to span the length of both columns in the top row. If you’re confused right now, that’s ok. This is difficult to understand in one lesson. It will sink in eventually. Learning how to master tables in HTML code is very difficult.
So, in the opening TD tag in the bottom row, type the attribute COLSPAN=”2”.
Your code should look like this:
<TR>
<TD COLSPAN=”2”>
Technically this is row 2, column 1
</TD>
</TR>
Part 30. Click File > Save in Notepad++. Click on your webpage in the browser and hit F5 to refresh it. The last table should now have two rows and the last row should now have only one column. All is right in the world now. In the bottom row in the last table add a BR tag and the following text “It should now span both columns above.” Add another BR tag and the following text “This webpage was developed by Your name”. Put your first and last name where it says your name. Your code should now look similar to this:
<TR>
<TD COLSPAN=”2”>
Technically this is row 2, column 1<BR>
It should now span both columns above.<BR>
This webpage was developed by Chris Martinez.
</TD>
</TR>
Part 31. Study the tables in the browser. Eventually the concepts of rows and columns will sink in and you will understand the differences between both. Once you understand how to use tables in HTML and master the use of COLSPAN you will be way ahead of most people trying to learn HTML code.
This time I want you to printout the webpage. From the browser click File > Print.
Once you’ve printed out your webpage, you’re done with this lesson.
|
|
