More Tables

<html>
<head>
<title>
Tables
</title>
</head>

<body>
<h1> Making a Table </h1>
<table border = ""summary = "My table is all about tables">
<!-- Do we mean table to look at or to eat on?-->
<caption> All About Tables </caption>
<tr align = center>
    <th scope = "col">Size of Table </th>
    <th scope = "col">Type of Material </th>
    <th scope = "col">Store</th>
</tr>

<tr>
    <td valign = bottom> 6 x 8 </td>
    <td valign = top> Mahogany </td>
    <td> <a href ="http://www.lowes.com/"> Loews </a> and some more
    text just to demonstrate the different things that
    tables can do! and some more
    text just to demonstrate the different things that
    tables can do! and some more
    text just to demonstrate the different things that
    tables can do!</td>
</tr>

<tr>
    <td> 7 x 9</td>
    <td> Oak </td>
    <td> <a href = "http://www.homedepot.com/">Home Depot </a></td>
</tr>

<tr>
    <td> 21 x 42</td>
    <td> Maple </td>
    <td> <a href = "http://www.walmart.com/"> Walmart </a> </td>
</tr>
<tr>
    <td colspan = 2> I am not a fan of Walmart</td>
    <td> but I like low prices, so I'm stuck.</td>
</tr>
<tr>
    <td rowspan = 3> Here's a big cell </td>
    <td > A </td>
    <td > B </td>
</tr>
<tr>
    <td> C</td>
    <td> D </td>
</tr>
<tr>
    <td> E</td>
    <td> F </td>
</tr>


</table>

<br><br>
<p>
That's a lot of stuff in that table! I think it's time for some
new tables.
</p>
<h2> Changing the Width and Height </h2>
<h3>...by pixels</h3>
<table border ="">
<tr>
    <th scope = "col"  align = center colspan = 3> Awesome Title</th>
</tr>
<tr>
<th scope = "row" valign = center rowspan = 4 width = 25>
My Row Title </th>
    <td>a</td>
    <td>b</td>
</tr>
<tr>
    <td>c</td>
    <td>d</td>
</tr>
<tr>
    <td>e</td>
    <td>f</td>
</tr>
<tr>
    <td>g</td>
    <td>h</td>
</tr>

</table>

<h3>...by percent</h3>
<ul>
<li><h4>percentage width</h4>
<table border = "">
<tr>
<th colspan = 3 width = 100> HEADING</th>
</tr>
<tr>
    <!-- The following cell will be 50% the width of the table-->
    <td width = 50%>Half
    <td>Quarter</td>
    <td>Quarter</td>
</tr>
</table>
<li><h4>relative width</h4>
<table border="">
<tr>
<th colspan = 3 width = 100> HEADING</th>
</tr>
<tr>
    <!-- The following cell will be 50% the width of the table,
    relative to the rest of the element-->
    <td relative_width = 50%>Half
    <td>Quarter</td>
    <td>Quarter</td>
</tr>
</table>
</ul>

<h2> Color, since you have been asking...</h2>
<table border = "1" bgcolor=#FF00FF>
<caption><em>Let's change the Background Color!</em></caption>
<tr>
    <td>All</td>
    <td>the</td>
</tr>
<tr>
    <td>same</td>
    <td>colors!</td>
</tr>
</table>

<table border = "1" bordercolor="#0000FF">
<caption><em>Let's change Colors!</em></caption>
<tr bgcolor=#FF00FF>
    <td>Some</td>
    <td>are</td>
</tr>
<tr>
    <td bgcolor=#C0C0C0>different</td>
    <td bgcolor=#000000><font color=#FFFFFF>colors!</font color>
    </td>
</tr>
</table>

<h2> Pictures in a Table </h2>
<table border = "1">
<tr>
    <!--My image is in the SAME folder as my webpage-->
    <td><img src = "Baby1.png"></td>
    <td><img src = "Baby1.png"></td>
</tr>
<tr>
    <td><img src = "Baby1.png"></td>
    <td><img src = "Baby1.png"></td>
</tr>
</table>


</body>
</html>