Table rows are a collection of cells containing the data. TD is one single value of a row in a table. If table row is the collection of the data values, then a cell represents the one of those values from one record. HTML Table TD tag can be used to create one cell from a collection of column values.
By default the cell contents are displayed with the font style defined with Table Tag or TR tag. If font style in table tag or Table Row tag is not defined, font style of Body Tag is rendered. You can also stylize the individual cells by using style attribute in every cell with Table TD tag.
Syntax of Table TD tag
Table TD tag must be specified within a table TR tag. It is not mandatory to give values to all the columns in a row. If you wish to skip values any columns just add a blank cell to keep the same number of cells in each row.
<TABLE> <CAPTION></CAPTION> <TR> <TH>Column Headers</TH> </TR> <TR> <TD> value of the cell</TD> </TR> </TABLE>
Features of Table TD Tag
- TD is a mandatorily paired tag. An unpaired TD tag will not be rendered properly in the browser.
- All Table TD tags for a table must always be enclosed in <TR> </ TR > Tags to define a set of cells as a row of data values.
- Cells text will be normal text by default. Text will be horizontally left aligned and vertically middle.
Attributes of TD tag
ID
This attribute is used to assign identification to a cell of an HTML table row. ID is alphanumeric string and must be unique for the entire web page containing the table. This ID is used to handle the cell data using the web page’s script. For example you can set the color of cell text, set back color of the cell or display value depending on the condition through script.
CLASS
This attribute is used to set a class defined in the style sheet to apply font, color or interaction style to table cells. 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 cell of a table row. When the user rests the mouse cursor on the Table cell, a value assigned to TITLE attribute appears in a small outlined box. If needed different tooltip for each cell, it has to be specified for every cell.
STYLE
Style attribute is used to add additional styling to cells of a table row. 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 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 cell of the table rows can be assigned a separate background color. BGCOLOR attribute is assigned a color by name or by its hexadecimal color code.
WIDTH
The WIDTH attribute of the HTML Table TD tag will set the width of the data row in pixels or the % of the container element. If this attribute is not set with a value the width of the widest cell in the column. If width of first cell in a column is set, all the cells in the column will follow this width.
BACKGROUND
The background attribute of HTML table TD 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.
NOWRAP
If contents of a cell are bigger than the width of a cell then it automatically spreads to the next line in the same cell. With NOWRAP included in TD tag the text will not flow to next line in the cell but cell will take width according to the length of the text.
<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 VALIGN="TOP">202</TD> <TD background="flower.jpg">Greta Garbo</TD> <TD NOWRAP BGCOLOR="#33FF11">Masters in Science in Computer Science and Applications</TD> <TD VALIGN="MIDDLE" >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>
