Web Development

HTML – Table Tag in HTML with Example

An HTML table is a two-dimensional matrix, consisting of rows and columns. Tables are intended for displaying data in columns on a web page.

The table tag is represented

 <table> </table>

and The Row of the table is described between

 <tr> </tr>

the column of a table is described between

 <td> </td>

The intersection of row and column is sometimes called a cell. Using the table can give you much greater control over how your text is displayed on a row and column in a respective manner.

These are the list of parameters that can be used in Table.

Parameter NameDescription
AlignIndicates whether the table should be aligned to the left or right of the page.
BackgroundProvides an image to use as the background of the table.
BgcolorProvides a color for the table’s background.
BorderThe width of the table border will be specified; if 0 is used, there will be no border
CellpaddingDetermines how many pixels are between each cell’s border and its contents
CellspacingSpecifies the number of pixels between the cells in the table
ColsIt determines the number of columns in the table; This value is not required as the table will count the numbers of columns you create.
HeightYou will define the height of the table in pixels or the percentage.
WidthYou will define the width of the table in the pixels or the percentage.

The TR Tag (Table Row Tag)

TR is known as a table row. It will indicate the beginning of the table row. Takes several optional attributes.

Parameter NameDescription
AlignThe alignment of the content of the cell can be left, right, and the center of the page.
BackgroundIt specifies an image to use as the background of the cells in the row.
BgcolorIt will specify the color to be used as the background of the cell. It can be different on different cells.

The TH Tag (Table Heading Tag)

The table heading tag is used to indicate the table heading in HTML. The heading is used at the top of each column and it does also take several optional parameters.

Parameter NameDescription
AlignAlignment specifics the alignment of the content left, right, and center of the page.
BackgroundImage can be used as a background for the cells in the row.
BgcolorColor of the cell in the background
ColspanIt will define how many columns the heading or title should span.
RowspanIt will define how many rows the heading should span.
ValignWill define whether the content should be aligned vertically or top middle bottom or the baseline of the cell
WidthDefines the width of the cell.

TR Tag (Table Definition) Tag

TR tag stands for table definition and marks the content of the cell and it does have the parameters the Table heading uses like align, background, bgcolor, colspan, rowspan, valign, and width.

The Caption Tag

The caption tag itself describes that it will denote the caption of the table and it will be indicated with the tags

<caption> </caption>

It will be written under the table tag <table></table>. It has align attribute which controls the placing of the caption with respect to the table.

align=bottom
  • immediately below the table
align=top
  • immediately above the table

HTML Table Examples

Example 1

<table border="1" width="20%">
<caption align="top">Student Name</caption>
<tbody>
<tr>
<th>Name 1</th>
<th>Name 2</th>
</tr>
<tr align="center">
<td>Student 1</td>
<td>Student 2</td>
</tr>
</tbody>
</table>

Example 2

<table border="1" width="20"><caption align="top">List List</caption>
<tbody>
<tr>
<th rowspan="2">Name1</th>
<th colspan="3">Name2</th>
</tr>
<tr>
<td>HTML</td>
<td>CSS</td>
<td>Javascript</td>
</tr>
<tr>
<td>C</td>
<td>C++</td>
<td>C#</td>
<td>Python</td>
</tr>
<tr>
<td>Name 3</td>
<td>Name 4</td>
<td>Name 5</td>
<td>Name 6</td>
</tr>
</tbody>
</table>

Tuts

About Author

Tutsmaster.org provides tutorials related to tech and programmings. We are also setting up a community for the users and students.

You may also like

HTML introduction
Web Development

HTML – Introduction, History & Syntax

  • December 21, 2019
So, first of all, I would like to ask a question for the first time when you heard this term
html heading tag
Web Development

HTML – Heading Tag With Syntax

  • December 21, 2019
A heading tag is one of the most important tags we focus on in HTML or web development because, without