Table-element advanced

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

Little advanced Table-element using

Little advanced Table-element using

-Tuomas Törmä

Sources

  • Introduction to Web Site Development lectures At Haaga-Helia spring 2013 teacher Mirja Jaakkola.

Leave a comment