HTML - Tables - Tutorialspoint

Trang chủ » Html Th Column » HTML - Tables - Tutorialspoint

Có thể bạn quan tâm

HTML - Tables Previous Next

HTML tables represent data, such as text, images, etc. in a structured format with rows and columns.

HTML tables offer a visual structure that aids in clarity and comprehension, making them a fundamental element in web development.

HTML Tables

Why HTML Tables are Used?

HTML tables are used for various reasons, primarily centered around organizing and presenting data effectively. Some key purposes include −

  • Structuring Data − Tables provide a coherent structure for organizing and displaying data, making it easier for users to interpret information.
  • Comparative Presentation − When there is a need to compare different sets of data side by side like difference between two concepts, tables offer a clear and visually accessible format.
  • Tabular Data Representation − Information that naturally fits into rows and columns, such as schedules, statistics, or pricing tables, can be well-represented using HTML tables.

Creating an HTML Table

You can create a table in HTML by using the <table> tag along with several tags that define the structure and content inside the table. The primary tags that are used with the <table> tag are <tr>, <td>, and <th>.

Creating tables in HTML involves several elements that define the structure and content. The primary tags used are <table>, <tr>, <td>, and <th>.

  • HTML <table> Tag: This tag is used to create the table that wrap the rows and columns within it.
  • HTML <tr> Tag: Stands for "table row" and is used to create a row within the table.
  • HTML <td> Tag: Represents "table data" and is used to create standard cells within a row.
  • HTML <th> Tag: Represents "table header" and is used to create header cells within a row.

HTML Table Structure - Rows and Columns

  • Rows: Each row in an HTML table is defined using the `<tr>` tag. It contains a set of table cells (`<td>` or `<th>`), representing the individual elements within that row.
  • Columns: The actual data or header information is contained within the table cells. Cells in the same position in different rows form a column.
  • A table row is defined by the <tr> tag. To set table header, we use <th> tag. To insert data in table cell, use the <td> tag.
  • A table in HTML consists of table cells inside rows and columns of the table.
  • Table heading is defined by the <th>...</th>. Data inside the <th> are the headings of the column of a table.
  • Each table cell is defined by a <td>...</td> tag. Data inside the <td> tag are the content of the table rows and columns.
  • Each table row starts with a <tr> ....</tr> tag.
  • We use style sheet to create border for the table.

Example

Consider a table representing a simple list of products with their respective categories and prices. This basic table structure organizes data in a clear, tabular format, making it easy to read and understand. Here, the border is an attribute of <table> tag and it is used to put a border across all the cells. If you do not need a border, then you can use border="0".

<!DOCTYPE html> <html> <body> <table border="1"> <tr> <th>Product</th> <th>Category</th> <th>Price</th> </tr> <tr> <td>Laptop</td> <td>Electronics</td> <td>$800</td> </tr> <tr> <td>Bookshelf</td> <td>Furniture</td> <td>$150</td> </tr> <tr> <td>Coffee Maker</td> <td>Appliances</td> <td>$50</td> </tr> </table> </body> </html>

Styling HTML Tables

You can also style an HTML table using CSS properties to give it a custom appearance. Either you can create classes to apply styles on a table, or you can simply write internal CSS properties to style the table.

Example

In the example below, we are styling the table with some CSS properties to make it stylish:

<!DOCTYPE html> <html> <head> <style> table { width: 100%; border-collapse: collapse; margin-bottom: 20px; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } th { background-color: #f2f2f2; } </style> </head> <body> <h2>HTML Table</h2> <p>This table is 3*3 cells including table header. <table> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> </tr> <tr> <td>Data 4</td> <td>Data 5</td> <td>Data 6</td> </tr> </table> </body> </html>

Table Background Color and Image

You can set the background color and background image of an HTML table by using the CSS and attributes of the <table> tag.

Using Attributes

The following are the attributes that can be used with <table> tag to set the background color and/or image:

  • bgcolor: The bgcolor attribute sets the table's background color. <table bgcolor="#f0f0f0">
  • background: The background attribute sets a background image. <table background="image.jpg">

Using CSS Properties

Using table tag's attributes is an old (outdated) style. It is recommended that you should use CSS to style an HTML table. The background-color and background-image properties are used to set background color and image respectively.

table { background-color: #f0f0f0; background-image: url('image.jpg'); }

Example to set table's background color and image using attributes

Here we are setting background color and image for a table using the attributes of <table> tag:

<!DOCTYPE html> <html> <head> <title>HTML Table Background Color</title> </head> <body> <table border="1" bordercolor="green" bgcolor="yellow" background="/images/test.png"> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr> <td rowspan="2">Row 1 Cell 1</td> <td>Row 1 Cell 2</td> <td>Row 1 Cell 3</td> </tr> <tr> <td>Row 2 Cell 2</td> <td>Row 2 Cell 3</td> </tr> <tr> <td colspan="3">Row 3 Cell 1</td> </tr> </table> </body> </html>

Example to set table's background color and image using CSS

Here we are setting background color and image for a table using the CSS properties:

<!DOCTYPE html> <html> <head> <title>HTML Table Background Color</title> <style> table { background-color: yellow; background-image: url('/images/test.png'); } </style> </head> <body> <table> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr> <td rowspan="2">Row 1 Cell 1</td> <td>Row 1 Cell 2</td> <td>Row 1 Cell 3</td> </tr> <tr> <td>Row 2 Cell 2</td> <td>Row 2 Cell 3</td> </tr> <tr> <td colspan="3">Row 3 Cell 1</td> </tr> </table> </body> </html>

Table Width and Height

The table's width and height can be set using either attributes or CSS properties. These values can be defined in pixels or percentages.

Using Attributes

The following attributes can set the width and height of a table:

  • width: It defines the width of the table. <table width="80%">
  • height: It defines the height of the table. <table height="200">

Using CSS

The following CSS properties can set the width and height of a table:

  • width: It defines the width of the table. table { width: 80%; }
  • height: It defines the height of the table. table { height: 400px; }

Example to set table's width and height using attributes

Here we are setting width (80%) and height (400px) of the table using the <table> tag's attributes:

<!DOCTYPE html> <html> <head> <title>HTML Table Width/Height</title> </head> <body> <table border="1" width="80%" height="400"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> </tr> </table> </body> </html>

Example to set table's width and height using CSS

Here we are setting width (80%) and height (400px) to the table using the CSS properties:

<!DOCTYPE html> <html> <head> <title>HTML Table Width/Height</title> <style> table{ width: 80%; height: 400px; } </style> </head> <body> <table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> </tr> </table> </body> </html>

HTML Nested Tables

Nested HTML tables refer to create tables inside a table. You can create tables inside a table by using the <table> tab inside any <td> tag, it creates another table in the main table's cell.

Example

In the following example, we are creating nested tables:

<!DOCTYPE html> <html> <head> <title>HTML Nested Tables</title> </head> <body> <table border=1> <tr> <td> First Column of Outer Table </td> <td> <table border=1> <tr> <td> First row of Inner Table </td> </tr> <tr> <td> Second row of Inner Table </td> </tr> </table> </td> </tr> <tr> <td> <table border=1> <tr> <td> First row of Inner Table </td> </tr> <tr> <td> Second row of Inner Table </td> </tr> </table> </td> <td> First Column of Outer Table </td> </tr> </table> </body> </html>

Table-related Tags Reference

The following are the table-related tags. You can click on the link to read about the specific tag and click on "Try It" to practice its example:

Tag Descriprtion Example
<table> It is used to create HTML table. Try It
<th> This tag defines the header of the table. Try It
<tr> This tag defines a table row. Try It
<td> This tag is used to store table data of each cell. Try It
<caption> This tag specifies the caption for the table. Try It
<colgroup> This tag describes the collection of one or more columns in a table for formattig. Try It
<col> This tag is used to offer information about columns. Try It
<thead> This tag is used to define table header section. Try It
<tbody> This tag is used to define table body section. Try It
<tfoot> This tag is used to define the table footer section. Try It
Print Page Previous Next Advertisements

Từ khóa » Html Th Column