tables - birks classesclasses.birksland.com/images/07 tables.pdf · dividing rows this is the best...
TRANSCRIPT
Tables
The easiest way to think of a table:Imagine you are dividing a web page into different areas
Original web page
Table Row 1
Table Row 2
Code for Tables
<table>
<tr>
<td> </td>
</tr>
</table>
HTML tag to open and close a table
Table Row(open & close)
Table Data(open & close)
Table Row 1
Table Row 2
<table>
<tr><td>Table Row 1</td>
</tr>
<tr><td>Table Row 2</td>
</tr>
</table>
Dividing rows This is the best and easiest way to control how your web pages look
Row 1
Row 2
Row 3
Cell 1
Cell 1
Cell 1 Cell 2
Cell 2
Cell 2
Cell 3
Cell 3
Cell 3 Cell 4
Cell 4
Cell 4
Tip: Think in horizontal terms (rows,)
not vertical terms (columns)
Cell 1
Table Row 2Cell 3
Cell 2
<table>
<tr><td>Cell 1</td> <td>Cell 2</td>
</tr>
<tr><td>Table Row 2</td>
</tr>
</table>
IMPORTANT!!
To make more cells in a row:
<td> </td>
1
2
You can use tables to control design
Let’s look at
the source
code
Controversy around using tables
https://www.lifewire.com/dont-use-tables-for-layout-3468941
Use CSS instead
Understanding tables in Dreamweaver
How do you control everything?
Make this again, using
tables
Let’s build this page
Our 1st piece of CSS in <head>: <style> td {vertical-align:top} </style>
Save the print out!
<html><head><title>Tables</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style>td {vertical-align:top}</style></head>
<body bgcolor="black"><br><table width="71%" border="0" cellspacing="0" cellpadding="5" align="center" height="454"><tr> <td bgcolor="#666666" width="33%" height="513"> <div align="center"> <p><font size="+7" color="#FFFFFF">This is the Internet</font></p>
</div><p align="left"> <font color="#FFFFFF"> In a simplified view, the Internet is nothing more than a series of connected computers and the actual transmission lines between the machines.</font></P>
<hr width="50%"><p align="center"><font color="#FFFFFF" size="4">What's the
'net?</font></p><p><font color="#FFFFFF"> Most people use the Internet
every day, but have no idea of how it actually works. Few of us really know,
</font></p></td><td width="67%" bgcolor="#CCCCCC" height="513"> <p align="center"><img src="backbone.jpg" width="375"
height="286"></p><p align="center"><font size="+3" color="#000000">'Net
backbone</font></p><ul><li><font color="#000000">Top level: Internet traffic travels along high-
capacity
transmission called the backbone.</font></li><li><font color="#000000">Middle level: ISP companies, like AT&T
and AOL, provide access to the backbone for consumers. </font></li>
<li><font color="#000000"> Lowest level: Consumers send and receive information
through their ISP via the backbone. </font></li></ul>
</td></tr>
</table><p> </p></body></html>
Code for table page
How did I extend the gray and create the blue?