1 / 11

Creative Website Design with Table Layouts

Learn to create visually appealing websites using table layouts. Explore different examples and enhance your web design skills effectively.

wynn
Download Presentation

Creative Website Design with Table Layouts

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Website Design - Review Layout using tables

  2. Table exmaple <table border="1"> <tr> <td rowspan=“2> <imgsrc=“cake.gif” alt=“cake” height=“100” width=“100” /></td> <td>James</td> </tr> <tr> <td>11/08</td> </tr> </table>

  3. Using a Table toFormat a Web Page <table border="0" width="80%"> <tr> <td colspan="3"> <h1>This is the banner area</h1></td> </tr> <tr> <td width="20%" valign="top"> Place Navigation here</td> <td width="10">&nbsp;</td> <td>Page content goes here</td> </tr> </table>

  4. Additional Table Layouts Try create these examples

  5. Website with Layout – Using Tables <html> <head> <title></title> </head> <body> </body> </html> <table> <tr> </tr> <tr> <td> </td> <td> </td> </tr> <tr> </tr> </table>

  6. Website with Layout – Using Tables <html> <head> <title>WebPage in Layout</title> </head> <body> </body> </html>

  7. Website with Layout – Using Tables <body> <table width="1000" border="0"> <tr> <td colspan="2" style="background-color:#FFA500;" height:100px; valign="middle"> <imgsrc="logo.png" width="100" height="100" alt="Logo Here" style="float: left;" /> <h1> (Write your heading here) </h1> </td> </tr> </table> </body>

  8. Website with Layout – Using Tables <trvalign="top"> <td style="background-color:#FFD700; width:100px;text-align:top;"> <b>Main Menu</b> <br> <a href="page1.html"> Page with image </a> <br> <a href="page2.html"> Information </a> <br> <a href="page3.html"> Others </a> </td> <td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;"> Content goes here<br> This is our BODY of this webpage we can use to write the information we want. Or to show other information like images.<br> <hr> this is example for a link to go to <a href="http://www.youtube.com"> Youtube </a> </td> </tr>

  9. Website with Layout – Using Tables <td style="background-color:#FFD700; width:100px;text-align:top;"> <b>Main Menu</b> <br> <a href="page1.html"> Page with image </a> <br> <a href="page2.html"> Information </a> <br> <a href="page3.html"> Others </a> </td>

  10. Website with Layout – Using Tables <td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;"> Content goes here<br> This is our BODY of this webpage we can use to write the information we want. Or to show other information like images.<br> <hr> this is example for a link to go to <a href="http://www.youtube.com"> Youtube </a> </td>

  11. Website with Layout – Using Tables <tr> <td colspan="2" style="backgroundcolor:#FFA500;text-align:center;"> This Webpage is made by YourName. (2013) </td> </tr>

More Related