Table rows present the data in a table. It is one single record of the column headers specified at the top of the table. If table header is the description of the data as a set of columns, then a row represents the collection of values as one record against all the headers. HTML Table TR tag can be used to create rows as a collection of column values.
By default the row is displayed with the font style defined with Table Tag. If font style in table tag Is not defined, font style of Body Tag is rendered. You can also stylize the individual rows by using style attribute.
Syntax of Table TR tag
Table TR tag must be specified after the table caption tag and table header rows. It is not mandatory to give values to all the columns. If you wish to skip values for such columns you still need to add a blank cell to preserve the structure of the table.
<TABLE> <CAPTION></CAPTION> <TR> <TH>Column Headers</TH> </TR> <TR> Table cell values </TR> </TABLE>
Features of Table TR Tag
- TR is a mandatorily paired tag. An unpaired TR tag will not be rendered properly in the browser.
- All Table TR tags for a table must always be enclosed in <TABLE> </ TABLE > Tags.
- Cells contained in TR tags will be normal text by default. Text will be horizontally left aligned and vertically middle.
Attributes of Table TR tag
ID
This attribute is used to assign identification to a row of an HTML table. ID is alphanumeric string and must be unique for the entire web page containing the table. This ID can be used to manipulate the row in the web page’s script. For example you can set the color of the alternate rows or highlight a specific row depending upon some condition satisfied by the data.
CLASS
This attribute is used to set a class defined in the style sheet to apply font, color or interaction style to table rows. A style sheet element specifies the consistent style for elements of same kind in a web page.
TITLE
Title attribute is used to set tooltip text for a row of a table. When the user rests the mouse cursor on the Table Row, a value assigned to TITLE attribute appears in a small outlined box. If needed different tooltip for each row, it has to be specified for every different row.
STYLE
Style attribute is used to add additional styling to rows of a table. You can set styles in a string with CSS element and value pairs separated by semicolons. This includes font size and family, alignment of text, background color of the caption etc.
ALIGN
The text to be displayed in the cells of the rows can be horizontally aligned using the ALIGN attribute. ALIGN attribute take any one value from LEFT, RIGHT, JUSTIFY or CENTER. By default data in row cells will be aligned to the left.
VALIGN
The text in the cells of the rows can be vertically aligned using the VALIGN attribute. It can have any one from TOP, BOTTOM BASELINE or MIDDLE. By default data in row cells will be vertically top aligned in each cell.
BGCOLOR
Each row of the table can be given a separate background color. BGCOLOR attribute can be assigned a color by name or by its hexadecimal color code.
HEIGHT
The HEIGHT attribute of the HTML Table TR tag will set the height of the data row in pixels or the % of the container element.
BACKGROUND
The background attribute of HTML table TR is used to render an image as the background of the row. Portion of the image according to the height and width of the header element will be visible.
<TITLE> Welcome to CSVeda.com </TITLE> <HTML> <BODY > <H3 ALIGN="CENTER">Using TABLES in Websites</H3> <TABLE WIDTH="50%" ALIGN="CENTER" BORDER="1px" CELLPADDING="5px" CELLSPACING="5px" BGCOLOR="#C4BFC5" > <TR> <TH >SNO.</TH> <TH >Name</TH> <TH >Class</TH> <TH >Marks</TH> </TR> <TR HEIGHT="100px" ALIGN="CENTER" VALIGN="BOTTOM" BGCOLOR="#FF4511" WIDTH="20%" COLSPAN="2" TITLE="Row1"> <TD>202</TD> <TD>Greta Garbo</TD> <TD>Masters in Science</TD> <TD>600</TD> </TR> <TR TITLE="Row2"> <TD>203</TD> <TD>Bell Staines</TD> <TD>Masters in Business Admin</TD> <TD>512</TD> </TR> <TR> <TD>204</TD> <TD>Clesent Blert</TD> <TD>Diploma in Administration</TD> <TD>272</TD> </TR> </TABLE> </BODY> </HTML>
