You create a table in HTML using the <table> element. Inside the <table> element, the table is written out row by row. A row is contained inside a <tr> element, which stands for table row. Each
cell is then written inside the row element using a <td> element, which stands for table data.
Following is the code used to create this basic table:
<table border="1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
When writing code for a table in a text editor, you should start each row and cell on a new line and indent table cells inside table rows as shown. If you use a web page authoring tool such as Dreamweaver, it probably automatically indents the code for you.
Many web page authors find it particularly helpful to indent the code for a table because leaving off just one tag in a table can prevent the entire table from displaying properly. Indenting the code makes it easier to keep track of the opening and closing of each element.
Take a look at the same code again. This time, it has not been split onto separate lines or indented,
which is much harder to read.
<table border="1"><tr><td>Row 1, Column 1</td><td>Row 1, Column 2</td></tr><tr>
<td>Row 2, Column 1</td><td>Row 2, Column 2</td></tr></table>
All tables follow this basic structure; although additional elements and attributes enable you to control the presentation of tables. If a row or column should contain a heading, use a <th> element in place of the <td> element for the cells that contain a heading. By default, most browsers render the
content of a <th> element in bold text.
WARNING Each cell must be represented by either a <td> or a <th> element for the table to display
correctly, even if there is no data in that cell.
Here iS a simple code for creating a simple table.
<table border="1">
<tr>
<th></th>
<th>Outgoings ($)</th>
<th>Receipts ($)</th>
<th>Profit ($)</th>
</tr>
<tr>
<th>Quarter 1 (Jan-Mar)</th>
<td>11200.00</td>
<td>21800.00</td>
<td><b>10600.00</b></td>
</tr>
<tr>
<th>Quarter 2 (Apr-Jun)</th>
<td>11700.00</td>
<td>22500.00</td>
<td><b>10800.00</b></td>
</tr>
<tr>
<th>Quarter 3 (Jul - Sep)</th>
<td>11650.00</td>
<td>22100.00</td>
<td><b>10450.00</b></td>
</tr>
<tr>
<th>Quarter 4 (Oct - Dec)</th>
<td>11850.00</td>
<td>22900.00</td>
<td><b>11050.00</b></td>
</tr>
</table>
DESCRIPTION:
The first row is made entirely of headings for outgoings, receipts, and profit. The top-left cell in
Figure 5-7 is empty; in the code for the table; you still need an empty <td> element to tell the browser
that this cell is empty. (Otherwise it has no way to know that there is an empty cell.)
In each row, the first cell is also a table heading cell (indicated using a <th>), which states which
quarter the results are for. Then the remaining three cells of each row contain table data contained
inside the <td> elements.
The figures showing the profit (in the right column) are contained within a <b> element, which
shows the profit figures in a bold typeface. This demonstrates how any cell can contain all manner
of markup. The only constraint on placing markup inside a table is that it must nest within the table
cell element (whether a <td> or a <th> element). You cannot have an opening tag for an element
inside a table cell and a closing tag outside that cell—or vice versa.
When creating tables, many people do not actually bother with the <th> element and instead use the
<td> element for every cell—including headers. You should, however, aim to use the <th> element
whenever you have a table heading. This is especially true when you use the scope attribute (which
you learn about in the next section, “Basic Table Elements and Attributes”), as it is valid only for
<th> elements.
Monday, March 19, 2018
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment