What is a table element?

In HyperText Markup Language (HTML), a table element displays data in tabular format. A table is made up of rows and columns consisting of data. A table can have multiple columns and rows.

The <table> tag is used to declare a table and every table can have only one <table> tag.

Elements of a Table

The table element acts as a container for other elements. That means other tags such as a row, header, caption, and so on are declared within the table element. Below is a list of the commonly used elements in a table.

  • <caption> …. </caption> - The caption element is used to specify the table caption. It contains a short description of the table.
  • <tr> …. </tr> - This element represents a table row. This tag is declared within the <tbody>, <thead>, <tfoot>, or <table> tags.
  • <th> …. </th> - It represents the table header cell. This element is declared only within the <tr> tag.
  • <td> …. </td> - It represents the table column. This element is declared only within the <tr> tag.
  • <thead> …. </thead> - This element represents the table header part.
  • <tbody> …. </tbody> - This element represents the table body part.
  • <tfoot> …. </tfoot> - This element represents the table footer section.
  • <colgroup> …. </colgroup> - This element indicates a column group.
  • <col> …. </col> - This element is declared within the <colgroup> tag to define properties for each table column.

HTML table example

Consider the following HTML table code:

<!DOCTYPE html>

<html>

<body>

<h1>The table element</h1>

<table>

<tr>

<th>Class</th>

<th>Subject</th>

</tr>

<tr>

<td>D100</td>

<td>Maths</td>

</tr>

<tr>

<td>D102</td>

<td>English</td>

</tr>

</table>

</body>

</html>

Output:

Output of HTML table example 1

Explanation:

The above code creates a simple HTML table having two rows and two columns. The code begins with the declaration of the HTML document element (<!DOCTYPE html>), followed by the <html> element to indicate the beginning of the HTML file. Next, the <body> tag indicates the beginning of the body part of the document. Within the <body> tag, the <h1> tag specifies the title of the document.

The <table> element is used to declare the table. The table is made up of cells. Each cell within the table is createdd using <td> element or <th> element nested within the <tr> element. The <th> elements nested within the <tr> element is used to create the column headers of the table. The <td> elements nested within the <tr> element is used to represent the table data. Every start tag must have its corresponding end tag. Therefore, the tags </table>,</body> and </html> are used.

HTML table attributes

HTML attributes are words used to control the behavior of an HTML element. They are written within the opening tag of the element. The table element supports various types of attributes. These include:

align

The align attribute defines how a table has to be aligned within the document. It can be set to align to the left, right, or center of the document.

Syntax: 

<table align = “left |right |center”>

bgcolor

This attribute is used to change the background color of an HTML table. It takes hexadecimal values preceded by ‘#’ or a predefined color keyword.

Syntax:

<table bgcolor = “colorname”>

bordercolor

This attribute is used to change the border color of a table. It takes hexadecimal values preceded by ‘#’ or a predefined color keyword.

Syntax:

<table bordercolor = “colorname”>

border

The border attribute is used to define the table border (frame) size in pixels. It can be set to 0 or any other integer value.

Syntax:

<table border = “size_of_border”>

Cellpadding

This attribute defines the space between the table content and cell border. It can be defined in pixels or percentages.

Syntax:

<table cellpadding = “value”>

cellspacing

This attribute is used to define the space between the table cells. It can be defined in pixels or percentages.

Syntax:

<table cellspacing = “value”>

colspan

This attribute merges multiple columns into one column. It can be set to any integer value.

Syntax:

<td colspan = “value”>

rowspan

This attribute merges multiple rows into one row. It can be set to any integer value.

Syntax:

<td rowspan = “value”>

Consider the following HTML table code for a better understanding of the table attributes:

<!DOCTYPE html>

<html>

   <body>

      <table align = "center" border = "3" bordercolor = "yellow" bgcolor = "red" cellpadding = "7" cellspacing = "7">

          <caption>This is the caption</caption>

         <thead>

            <tr>

               <td colspan = "4">I am the head of the table</td>

            </tr>

         </thead>

         <tfoot>

            <tr>

               <td colspan = "4">I am the foot of the table</td>

            </tr>

         </tfoot>

         <tbody>

             <tr>

               <th>Head 1</th>

               <th>Head 2</th>

               <th>Head 3</th>

               <th>Head 4</th>

            </tr>

            <tr>

                <td rowspan = "2">Row 1 Cell 1</td>

                <td>Row 1 Cell 2</td>

               <td>Row 1 Cell 3</td>

               <td>Row 1 Cell 4</td>

            </tr>

            <tr>

               <td>Row 2 Cell 2</td>

               <td>Row 2 Cell 3</td>

               <td>Row 2 Cell 4</td>

            </tr>

         </tbody>

      </table>

   </body>

</html>

Output:

Output of HTML table example 2

Explanation:

The above code creates an HTML table having five rows and four columns. The code starts with the declaration of the HTML document tag (<!DOCTYPE html>), followed by the <html> element that marks the beginning of the HTML document. Next, the <body> tag indicates the beginning of the body part of the document. Within the <body> tag, the <table> element is declared to create a table.

The <table> element has the following attributes:

  • align = “center” - To align the table in the center of the document.
  • border = "3" - To set the table border size to 3 pixels.
  • bordercolor = "yellow" - To set the border color to yellow.
  • bgcolor = "red" - To set the table background color to red.
  • cellpadding = "7" - To set the cellpadding value to 7 pixels.
  • cellspacing = "7" - To set the cellspacing value to 7 pixels.

The table caption is written using the <caption> element in the next line. The <thead> element defined the table header section. This section has one row declared using the <tr> element. Within the <tr> element, one column with a colspan value 4 is created. That means the four columns are merged into a single column. The <tr> and <thead> tags are then closed.

The <tfoot> element is used to declare the table footer part. This section is also spanned to merge four columns into one column using the <colspan> tag. Then, the <tr> and <tfoot> tags are closed.

The <tbody> element declares the beginning of the table body. The first row is created using the <tr> element, within which the <th> element is used to define the table header cell. Four <th> tags are used to give a heading for the four columns. The next <tr> element is used to declare a new row. The first column is set to a rowspan value of 2, which indicates that two table rows are combined to create one row. The next columns are declared using the three <td> tags, and the row is ended. The <tr> tag is used for the new row again, and three columns are declared. Finally, the <tbody>, <table>, <body>, and <html> elements are closed.

Context and Applications

The topic "Elements of tables" are essential in web development. Students studying the following courses study this topic:

  • Certification courses in web development
  • Bachelor of Science in Computer Science
  • Bachelor of Science in information technology
  • Master of Science in Computer Science
  • Master of Science in information technology

Practice Problems

Q1) In HTML, the table row is defined using which tag?

  1. <tr>
  2. <simple td number>
  3. <atomic number row>
  4. <simple default value content>

Answer: Option a

Explanation: The table row is defined using the <tr> HTML tag.


Q2) To merge more than one row, which attribute is used?

  1. multi-column content number
  2. scope attribute number
  3. rowspan
  4. colspan content

Answer: Option c

Explanation: The rowspan attribute merges more than one row in an HTML table.

Q3) Which attribute defines the space between the cell content and border?

  1. cell padding
  2. cell spacing
  3. Header information number
  4. Tabular data number

Answer: Option a

Explanation: Cellpadding is used to indicate the space between the cell content and border.

Q4) Which element adds a table caption?

  1. Include caption column group
  2. Simple caption content
  3. caption
  4. Tabular data caption

Answer: Option c

Explanation: The <caption> element adds a caption to the table.

Q5) Which of the following element is used to indicate a table header section?

  1. thead
  2. theader information
  3. header information
  4. data cells number

Answer: Option a

Explanation: The <thead> element represents the table header part.

  • HTML lists
  • HTML attributes
  • HTML tags
  • HTML events

Want more help with your computer science homework?

We've got you covered with step-by-step solutions to millions of textbook problems, subject matter experts on standby 24/7 when you're stumped, and more.
Check out a sample computer science Q&A solution here!

*Response times may vary by subject and question complexity. Median response time is 34 minutes for paid subscribers and may be longer for promotional offers.

Search. Solve. Succeed!

Study smarter access to millions of step-by step textbook solutions, our Q&A library, and AI powered Math Solver. Plus, you get 30 questions to ask an expert each month.

Tagged in
EngineeringComputer Science

Web Development

Table

Elements of Tables

Search. Solve. Succeed!

Study smarter access to millions of step-by step textbook solutions, our Q&A library, and AI powered Math Solver. Plus, you get 30 questions to ask an expert each month.

Tagged in
EngineeringComputer Science

Web Development

Table

Elements of Tables