html4 tutorial – part 4 - washoeschools.net
TRANSCRIPT
HTML4 TUTORIAL – PART 4 STEP 14 – USING TABLES FOR PAGE LAYOUT
So far, you’ve learned how to use <br> tags and character strings to move elements around on your web page. But using the <br> tag for vertical spacing and the character string for horizontal spacing are sort of primitive ways to layout items on your page.
Let’s assume you want to create a web page that looks something like this:
It would be very difficult to do this using only the primitive tags you’ve learned. But if
you understand how to use tables in HTML, then it’s much easier to design your layout.
2
Table Basics. An HTML table is constructed by designating rows and columns. Where they intersect is called a cell. Once created, you then determine what content you want to appear in each cell.
It’s best to hand-sketch your layout on paper so you can more easily see the rows and
columns needed. The example below shows the table rows and columns used in the robot page above:
This layout has two rows (horizontal). Each row has three columns in it which created
three cells. The top row cells have WALL-E, some text, and A Fire Robot. The second row also has three cells with A Welding Robot, some more text, and the Honda-ASIMO Robot.
3
The most difficult thing about creating tables for your web page is that you have to write the code vertically but it appears on your page horizontally. In other words, you add rows and columns down the Notepad page, but your rows actually go horizontally across the browser window. That’s why it’s a good idea to draw it out by hand first, so you can identify its makeup.
In your code, you first use the tag <table with an attribute of border. If you give the value of border a zero “0,” then no borders will show on the page.
<table border=“0”> If you set the value to “1” or more then you will show borders (which might be what you
want). <table border=“1”> Tables must have a closer when their construction in Notepad is done: </table> Within the table tags, you must designate each row you want to construct <tr> </tr>.
Within each row, you designate each column you want <td> </td>. Finally, you then add the content within each cell that is created.
Here is the code for the robot page. For the sake of clarity, table tags <table>
</table> are in red, row tags <tr> </tr> are in green, and column tags <td> </td> are in blue:
4
<html> <head> <title>Robots!</title> </head> <body bgcolor="#00CCFF"> <center> <h1>Robots!</h1> <table border="0"> <tr> <td> <img src="robot1.jpg"> WALL-E! </td> <td> A robot is a mechanical device that can perform tasks automatically. It may – but need not – be humanoid in appearance. Some robots require some degree of guidance, which may be done using a remote control, or with a computer interface. A robot is usually an electro-mechanical machine that is guided by a program or circuitry. </td> <td> <img src="robot4.jpg"> A Fire Robot! </td> </tr> <tr> <td> <img src="robot3.jpg"> A Welding Robot! </td> <td> Robots can be autonomous, semi-autonomous or remotely controlled and range from humanoids such as ASIMO and TOPIO to Nano robots, 'swarm' robots, and industrial robots. By mimicking a lifelike appearance or automating movements, a robot may convey a sense of intelligence or thought of its own. The branch of technology that deals with robots is called robotics. </td> <td> <img src="robot2.jpg"> Honda-ASIMO Robot! </td> </tr> </table> </center> </body> </html>