Expertrating - HTML Tutorial, Tables

Home > Courses, Tutorials & eBooks > HTML Tutorial > Tables

HTML Tutorial - Tables

Page 2 of 4

TD Tag

The <td> tag sets a single table cell in which data is shown. Td means table data.

Example:

<tr>

<td> weird jokes </td>

<td> classic jokes </td>

</tr>

Attributes of <td> Tag

Align

Align sets the horizontal alignment of text within the table cell. It takes up the values left, center, and right.

Example:

<td align=left> classic jokes </td>

Valign

Valign is the vertical alignment of text within the table cell. It takes up the values- top, middle, center, bottom, and baseline.

Example:

<td valign=top> classic jokes </td>

Colspan and Rowspan

Table cells can span across more than one column or row. The attributes colspan and rowspan indicate how many columns or rows a cell should take up. We can create a cell that is equivalent to two cells.

Example:

<td colspan=2> jokes </td>

<td> classic jokes </td> <td> cricket jokes</td>

</tr>

Nowrap

Nowrap indicates that the text should not wrap in the cell. Nowrap does not wrap the text, no matter how long the sentence is.

Example:

<tr> <td nowrap> The text written in this sentence will not be wrapped in any case. </td> </tr>

Bgcolor

Bgcolor sets the background color of a single cell in a table.

Example:

<tr> <td bgcolor=”#FF6699”> Good jokes </td> </tr>

Bordercolor

Bordercolor works similarly as it works with the <table> tag. It sets the color of the entire border around a cell.

Example:

<tr border=2> <td bordercolor=red> Nature Jokes </td> </tr>

TH Tag

The <th> tag works just like the <td> tag, except that the cell is a header for a column or a row. The header serves like a title for a column or a row.

Example:

<tr> <th> Category of jokes </th> </tr>

The following example illustrates an HTML table applying the tags described above:

Example:

<html>

<head>

<title> My list of jokes </title>

</head>

<h1 align=center> Page Of Tables </h1>

<tr bgcolor="#CCCC99"><th colspan=2> Jokes </th> </tr>

<tr bgcolor="#CCCC99"><td> Serial no.</td><td>Joke Type</td></tr>

<tr><td>1.</td> <td bordercolor=red> Classic Jokes </td>

<tr><td>2.</td> <td bordercolor=red> Tennis Jokes </td>

<tr><td>3.</td> <td bordercolor=red> Cricket Jokes </td>

</table>

<br/>

<h2 align=left> My Favourite Joke </h2>

<tr> <td>Classic Joke </td> <td nowrap bordercolor=red> The text written in this will not be wrapped in any case. No matter how long the text is. </td>

</table>

</body>

</html>

This is how the web page looks

ExpertRating HTML Certification - Get Certified Now!!