tables - birks classesclasses.birksland.com/images/07 tables.pdf · dividing rows this is the best...
TRANSCRIPT
![Page 1: Tables - Birks classesclasses.birksland.com/images/07 tables.pdf · 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](https://reader035.vdocument.in/reader035/viewer/2022071000/5fbca342e178a469044b8346/html5/thumbnails/1.jpg)
Tables
![Page 2: Tables - Birks classesclasses.birksland.com/images/07 tables.pdf · 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](https://reader035.vdocument.in/reader035/viewer/2022071000/5fbca342e178a469044b8346/html5/thumbnails/2.jpg)
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
![Page 3: Tables - Birks classesclasses.birksland.com/images/07 tables.pdf · 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](https://reader035.vdocument.in/reader035/viewer/2022071000/5fbca342e178a469044b8346/html5/thumbnails/3.jpg)
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)
![Page 4: Tables - Birks classesclasses.birksland.com/images/07 tables.pdf · 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](https://reader035.vdocument.in/reader035/viewer/2022071000/5fbca342e178a469044b8346/html5/thumbnails/4.jpg)
Table Row 1
Table Row 2
<table>
<tr><td>Table Row 1</td>
</tr>
<tr><td>Table Row 2</td>
</tr>
</table>
![Page 5: Tables - Birks classesclasses.birksland.com/images/07 tables.pdf · 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](https://reader035.vdocument.in/reader035/viewer/2022071000/5fbca342e178a469044b8346/html5/thumbnails/5.jpg)
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)
![Page 6: Tables - Birks classesclasses.birksland.com/images/07 tables.pdf · 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](https://reader035.vdocument.in/reader035/viewer/2022071000/5fbca342e178a469044b8346/html5/thumbnails/6.jpg)
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>
![Page 7: Tables - Birks classesclasses.birksland.com/images/07 tables.pdf · 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](https://reader035.vdocument.in/reader035/viewer/2022071000/5fbca342e178a469044b8346/html5/thumbnails/7.jpg)
1
2
You can use tables to control design
![Page 8: Tables - Birks classesclasses.birksland.com/images/07 tables.pdf · 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](https://reader035.vdocument.in/reader035/viewer/2022071000/5fbca342e178a469044b8346/html5/thumbnails/8.jpg)
Let’s look at
the source
code
![Page 9: Tables - Birks classesclasses.birksland.com/images/07 tables.pdf · 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](https://reader035.vdocument.in/reader035/viewer/2022071000/5fbca342e178a469044b8346/html5/thumbnails/9.jpg)
Controversy around using tables
https://www.lifewire.com/dont-use-tables-for-layout-3468941
Use CSS instead
![Page 10: Tables - Birks classesclasses.birksland.com/images/07 tables.pdf · 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](https://reader035.vdocument.in/reader035/viewer/2022071000/5fbca342e178a469044b8346/html5/thumbnails/10.jpg)
Understanding tables in Dreamweaver
How do you control everything?
![Page 11: Tables - Birks classesclasses.birksland.com/images/07 tables.pdf · 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](https://reader035.vdocument.in/reader035/viewer/2022071000/5fbca342e178a469044b8346/html5/thumbnails/11.jpg)
Make this again, using
tables
![Page 12: Tables - Birks classesclasses.birksland.com/images/07 tables.pdf · 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](https://reader035.vdocument.in/reader035/viewer/2022071000/5fbca342e178a469044b8346/html5/thumbnails/12.jpg)
Let’s build this page
Our 1st piece of CSS in <head>: <style> td {vertical-align:top} </style>
Save the print out!
![Page 13: Tables - Birks classesclasses.birksland.com/images/07 tables.pdf · 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](https://reader035.vdocument.in/reader035/viewer/2022071000/5fbca342e178a469044b8346/html5/thumbnails/13.jpg)
<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
![Page 14: Tables - Birks classesclasses.birksland.com/images/07 tables.pdf · 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](https://reader035.vdocument.in/reader035/viewer/2022071000/5fbca342e178a469044b8346/html5/thumbnails/14.jpg)
How did I extend the gray and create the blue?