Is this as difficult as your multiplication tables? Of course not, if you go about it the
right way. If you’re just starting out with this concept and I assume you are, then it is
usually best to draw the table you want to make on a piece of paper like I have
below:
Product Prices
Product Price
4pk Energy Drinks $8.00
1kg Bacon $10.50
Loaf of Bread $2.50
Total $22.00
Now look at it in code below:
*******************************************************************
1 <?xml version = "1.0 encoding = "utf-8"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4 <html xmlns="http://www.w3.org/1999/xhtml">
5 <head>
6 <title> Tabling </title>
7 </head>
8 <body>
9 <table border>
10 <caption><strong> Product Prices </strong></caption>
11 <thead>
12 <tr><th>Product</th><th>Price</th></tr>
13 </thead>
14 <tbody>
15 <tr><td>4pk Energy Drinks</td><td>$8.00</td></tr>
16 <tr><td>1kg Bacon</td><td>$10.50</td></tr>
17 <tr><td>Loaf of Bread</td><td>$2.50</td></tr>
18 </tbody>
19 <tfoot>
20 <tr><td>Total</td><td>$22.00</td></tr>
21 </tfoot>
22 </table>
23 </body>
24 </html>
*********************************************************************
Now mix them together and the display below should help you understand how the
table is structured:
************************************************************************
************************************************************************
A <table> or many tables can also be useful as frames in web pages, one for the
menu, one for the content and one for the header.
<thead> and <tfoot> bold the first and last row respectively to draw more attention
to those parts of the table. Most people would look at the total in the footer of the
table first right?
<td> is the table data in the rows of the table.
<tr> is the table rows that start and end on each line of code for neatness.
<caption> is good to make sure that your table is not just a bundle of information
without a reason for it existing.
0 comments:
Post a Comment