Lets make some Tables with HTML!

OK, ok, it may not be fun at first, but building tables with html comes in very very handy, trust me! Lets get our feet wet again by practicing a bit using brackets.

Create a creative html table that emphasizes the use of :

  1. Lists (3 top 10 lists of your choice)
  2. Colors (both as text and backgrounds)
  3. Fonts (3-5 of your choice)
  4. Images (3-6 static, non moving images)
  5. GIF animations ( 3-6 moving gif animations)
  6. Hyperlinked content of your choice (3 urls of your choice)

Save your html file and add it to the media library here on the site so you can hyperlink to the .html file name and post it into a blog post with the final outcome. Ahem, because this is a blog format, lets say a few words about your final outcome. What did you like about working with tables again? What did you least like about it? Did you discover something new? If so, what was it? Have you redefined what you can do with html tables?

Here is my example –>  tablefun  <— Click me to view on the web.

Here is an example of examples on the web to check out – http://www.hongkiat.com/blog/html-table-building-30-beautiful-examples-and-useful-javascripts/

(ok, its not pretty, but you get the idea!)

Here my html below –

<!DOCTYPE hmtl>
<html>
<head>
<title>Table Fun</title>
</head>
<body>
<br>
<table border=”2″>
<thead>
<tr>
<th> Table Header Information Here</th>
<th> Table Header Information Here </th>
<th> Table Header Information Here </th>
</tr>
</thead>
<tr>
<td>Table Row One</td>
<td>Table Exercise #1</td>
<td>Why Tables?</td>
</tr>
<tr>
<td>Table Row Two</td>
<td>Table Exercise #2</td>
<td>For What?</td>
</tr>
<tr>
<td>Table Row Three</td>
<td>Table Exercise #3</td>
<td>Do I Need it?</td>
</tr>
<tr>
<td> Can I add Images here? Whoa, lots of negative space above and below me..</td>
<td><img src=”http://www.ryanseslow.com/wp-content/uploads/2016/05/Internet-Down-2.gif”/></td>
<td> Ill take that as a YES!</td>
</tr>
<tr>
<td>This resource is very helpful –> </td>
<td><a href=”http://www.tizag.com/htmlT/tables.php”>I really like it! Click here and use it if you want.</a></td>
<td> What resources have you found for tables?</td>
</tr>
<tr style=”background-color: yellow;”>
<td> Colors!</td>
<td> Color makes everything better.</td>
<td> You do agree…..right?</td>
</tr>
<tr>
<td width=”30%”>
<ul>
<li>I can make list here? Plenty of room!</li>
<li>Wow, thats pretty cool!</li>
<li>How can I stylize it? I should!</li>
</ul>
</td>
<td width=”30%”>
<ul>
<li>What are my 10 favorite Movies?</li>
<li>What are my 10 favorite Songs?</li>
<li>What are my 10 favorite Foods?</li>
</ul>
</td>
<td width=”30%”>
<ul>
<li>Why is the width set this way, seems tight!</li>
<li>Maybe I should change it?</li>
<li>I should add more colors?</li>
</ul>
</td>
<tr>
<td><img src=”http://www.ryanseslow.com/wp-content/uploads/2016/05/Internet-Down-2.gif”/></td>
<td><img src=”http://www.ryanseslow.com/wp-content/uploads/2016/05/Internet-Down-2.gif”/></td>
<td><img src=”http://www.ryanseslow.com/wp-content/uploads/2016/05/Internet-Down-2.gif”/></td>
</tr>
<tr style=”background-color: red;”>
<td> MORE Colors!</td>
<td> MORE Colors!</td>
<td> MORE Colors!</td>
</tr>
</table>
</body>
</html>

 

css.php