Download presentation
Presentation is loading. Please wait.
1
Setting your website out using a table
Table layout Setting your website out using a table
2
Basics <!doctype html> <html>
<head><title>My Webpage</title> Clever instructions for your page </head> <body> All the content of your page </body> </html>
3
How can we make it look better?
Used to use ‘frames’
4
Tables
5
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>
6
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>
7
Task Can you make this table?
8
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!
Similar presentations
![>> Introduction to HTML: Tables. HTML is used to give websites structure 5 Basic Tags Element = Start-Tag+Content+End-Tag Heading Tags [h1-h6] Paragraph.](/24/7400148/big_thumb.jpg ">> Introduction to HTML: Tables. HTML is used to give websites structure 5 Basic Tags Element = Start-Tag+Content+End-Tag Heading Tags [h1-h6] Paragraph.>")
