Rows and Cells - HTML

Rows
Table rows are the horizontal elements of the table grid and are delimited with table row tags (<tr>). For example, a table with five rows would use the following pseudocode:

<table>
<tr> row1 </tr>
<tr> row2 </tr>
<tr> row3 </tr>
<tr> row4 </tr>
<tr> row5 </tr>
</table>

Possible Rules Attribute Values

Possible Rules Attribute Values

The rows are divided into individual cells by embedded <td> or <th> tags (see the next section, “Cells,” for more details).

Note The row ending tag (</tr>) is optional. However, for clarity in your code you should consider always including appropriate ending tags. The <tr> tag supports the following attributes.

Tag Attributes

Tag Attributes

For an example of how baseline vertical alignment differs from bottom alignment, consider the two tables.

Baseline alignment aligns the baseline of the text.

Baseline alignment aligns the baseline of the text.

If you use the alignment attributes in a <tr> tag, that alignment will be applied to all cells in that row. To format cell alignment individually, specify the alignment attribute(s) in individual cell tags (<th> or <td>) or in <col> or <colgroup> tags.

Note The bgcolor attribute, used to set the background color for the row, has been deprecated in HTML 4.01. Instead of using this attribute, it is recommended that you use applicable styles to accomplish the same effect.

Cells
Individual cells of a table are the elements that actually hold data. In HTML, cell definitions also define the columns for the table. You delimit cells/columns with table data tags (<td>).

For example, consider the following code:

<table border=“1” cellpadding=“5”>
<tr>
<td>Column 1</td><td>Column 2</td><td>Column 3</td>
</tr>
<tr>
<td>Column 1</td><td>Column 2</td><td>Column 3</td>
</tr>
</table>

Tip Formatting your tables with ample white space (line breaks and indents) will help you accurately format and understand your tables. There are just as many ways to format a table in HTML as there are Web programmers—find a style that suits your taste and stick to it. This code defines a table with two rows and three columns, due to the three sets of <td> tags.

You can also use table header tags (<th>) to define columns that are headers for the columns. Expanding on the previous example, the following adds column headers:

<table border=“1” cellpadding=“5”>
<tr>
<th>Header 1</th><th>Header 2</th><th>Header 3</th>
</tr>
<tr>
<td>Column 1</td><td>Column 2</td><td>Column 3</td>
</tr>
<tr>
<td>Column 1</td><td>Column 2</td><td>Column 3</td>
</tr>
</table>

Table header tags make it easy to format column headings, without having to result to character formatting. For example, the preceding code results in most user agents rendering the <th> cells in a bold font (the default for <th>). To accomplish the same formatting without header tags, you would need to include bold character formatting similar to the following:

<tr>
<th><b>Header 1</b></th>
<th><b>Header 2</b></th>
<th><b>Header 3</b></th>
</tr>

Using CSS, your formatting options with <th> are practically limitless; simply define appropriate formatting or several formatting classes as necessary.

Note Most user agents will not properly render an empty cell (for example, <td></td>). When you find yourself needing an empty cell, get in the habit of placing a nonbreaking space entity (&nbsp;) in the cell (for example, <td>&nbsp;</td>) to help ensure the user agent will render your table correctly. Although cells represent the smallest element in a table, surprisingly, they have the most attributes for their tags.

Note Previous versions of HTML also supported a nowrap attribute to control whether a cell’s contents wrapped or not. In HTML 4.01, this attribute has been deprecated in favor of styles.


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

HTML Topics