As promised in table-element article I show you how you can actually use table-element to create a website. This only raw version but with modification it could be a really nice one
The Work
Basically I introduced enough material in table-element article show you should be able to do this pretty easily. And moreover I promised to show how it’s done. I used Google fonts to remind how they are used.
Here is the code and css-file I used.
<!DOCTYPE html> <html> <head> <meta charset="iso-8859-15"> <title>MR. Rosswels, general goods fot general people</title> <link rel="stylesheet" href="style.css" type="text/css" /> <link href='http://fonts.googleapis.com/css?family=Racing+Sans+One' rel='stylesheet' type='text/css'> </head> <body> <table border="4"> <tr><!-- first row--> <td><h1> MR Rosswels</h1> </td> <td colspan="2"><h2>General goods for general needs</h2> </td> </tr> <tr><!-- Second row--> <td rowspan="2"> <ul> <li>Home <li>About us <li>Goods <ul> <li>Category A <li>Category B <li>Category C </ul> li>Contact us <li>Forms </ul> </td> <td rowspan="2"> <h3>New shop open in LA</h3> <br> <p> We in MR Rosswel goods are more than welcome to introduce to You our new shop!</p> <br> <p> The new shop is twice as large and we have lot's of new items for each gender. Be the first to buy our new Goods A category goods.</p> <p> We also have new Category C, here you can find many 50's goods that are remodelt todays use</p> </td> <td> <img src="rope.jpg" alt="rope"> </td> </tr> <tr><!-- third row --> <td> <img src="shovel.jpg" alt="shovel"> </td> </tr> <tr><!-- fourth row --> <td colspan="3"> <address>Beeferroute 12 CS LA 54 ew8, 05545 05d ad5 LA </address> </td> </tr> </table> </body> </html>
and the css
li ul {display:none;} /*Alilistat piiloon*/ li:hover ul {display:block;} /*alilista näkyviin*/ td {vertical-align:top;} /*solun sisältö ylös*/ li {list-style:none; /*piilosttaa listamerkin*/ font-size:10px; font-family:'Racing Sans One', cursive; } h1, h2, h3, p, address {font-family: 'Racing Sans One', cursive;} table {width:1000px; margin:auto; } address {margin:auto; padding:50px; margin-left:250px; }
and the results are
-Tuomas Törmä
Sources
- Introduction to Web Site Development lectures At Haaga-Helia spring 2013 teacher Mirja Jaakkola.