Setting your website out using a table Table layout Setting your website out using a table
Basics <!doctype html> <html> <head><title>My Webpage</title> Clever instructions for your page </head> <body> All the content of your page </body> </html>
How can we make it look better? Used to use ‘frames’
Tables
LETS MAKE A TABLE <table> <tr> - a table row divide the row into columns with <td> Close each division </td> On the top row use table header <th> & </th> instead of <td> Close table row </tr> New table row etc Close table </table>
Working example <html> <head> <title> Table 1 <body> <h1 align = "center"> TABLE LAYOUT</h1> <table border="5" width ="300px" height ="400px" align = "center" img align = "middle"> <CAPTION>This is a simple 3x3 table</CAPTION> <tr><th>table 1</th><th>column 2</th></tr> <tr><td>row 1 col1</td><td>row 1 col2</td></tr> <tr><td>row 2 col1</td><td>row 2 col2</td></tr> <tr><td>bottom row col1</td><td>bottom row col2</td></tr> </table> </body> </html>
Task Can you make this table?
Some hints put images into same folder as web-page <img src="imagename.jpg" alt="an image"> <td colspan=“x”> makes a division stretch across several columns underneath it <td rowspan=“y”> makes a division stretch across several rows alongside it X and y should be replaced by suitable whole numbers!