<![CDATA[
#Tables!
Tables are an effective way of organizing a few things, or data you want to compare. They are not, however, ideal for organizing the design on your webiste.
You'll be using tables to create an icon chart as part of your project, due next week.
## Table Structure
The HTML for tables is a good example of nesting. They are made up of several components.
`<table>`<br>
`<tr>`<Br>
`<th>I'm a header</th> <!-- new colum can go right next to it -----> <th>I'm also a header</th> </tr>`<Br>
`<tr>`<Br>
`<td>I'm the first row of data</td><td>I'm the second column's data</td> </tr>`<Br>
`</table> `<Br>
#### `<table></table>` : The main tag for your table. every aspect of it goes within these tags
#### `<tr></tr>` : Stands for table row. Use it every time you want to start a new row.
#### `<th></th>` : Stands for table header. Use if you want the top row to have bolded labels.
#### `<td></td>` : Table data. Where the information you want to display goes.
## An example
<img src="assets/table.jpg" width="80%">
#Layout
<img src="assets/blocks.png">
### Generically, this layers things on top of each other.
Try dropping this into a new sublime file.
```
<!DOCTYPE html>
<html>
<head>
<style>
div {
background: yellow;
font-size: 24px;
}
</style>
</head>
<body>
<div>
<p>Box 1</p>
</div>
<div>
<p>Box 2</p>
</div>
<div>
<p>Box 3</p>
</div>
</body>
</html>
```
### But you can change how your HTML is presented
<br>
#### Try setting the width in the CSS to 20% like this `width="20%"`
<BR>
### You can control the layout using CSS
<img src="assets/layout.png" width="80%">
### Let's make a box using some of this
#### Delete all the stuff out of the HTML file you've been working in.
#### Add this as the CSS
<img src="assets/style-box.png">
<br>
#### Then add this as the body
<br>
<img src="assets/html-box.png">
### What if you want to wrap text around an image?
```
<!DOCTYPE html>
<html>
<head>
<style>
img {
float:left;
padding: 10px;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor amet pug hoodie VHS yr distillery. Wolf XOXO unicorn flexitarian, edison bulb gluten-free woke lumbersexual VHS iceland tofu. Air plant skateboard tilde paleo etsy.
<img src="img/kids.png" width="40%">
<p>Hoodie cred direct trade mumblecore, mlkshk hot chicken tote bag coloring book salvia pitchfork photo booth plaid green juice. Man bun trust fund bespoke typewriter, irony cray you probably haven't heard of them intelligentsia mixtape poutine paleo distillery cloud bread.
</p>
<p>Hoodie cred direct trade mumblecore, mlkshk hot chicken tote bag coloring book salvia pitchfork photo booth plaid green juice. Man bun trust fund bespoke typewriter, irony cray you probably haven't heard of them intelligentsia mixtape poutine paleo distillery cloud bread.
</p>
<p>Hoodie cred direct trade mumblecore, mlkshk hot chicken tote bag coloring book salvia pitchfork photo booth plaid green juice. Man bun trust fund bespoke typewriter, irony cray you probably haven't heard of them intelligentsia mixtape poutine paleo distillery cloud bread.
</p>
<p>Hoodie cred direct trade mumblecore, mlkshk hot chicken tote bag coloring book salvia pitchfork photo booth plaid green juice. Man bun trust fund bespoke typewriter, irony cray you probably haven't heard of them intelligentsia mixtape poutine paleo distillery cloud bread.
</p>
</body>
</html>
```
# If there's time...
## Play around. Screw up. Make ugly things. Make pretty things. Go.
## I am here, please use me.
]]>