HTML table

HTML table is to display data in a structured, tabular format on a web page. Tables are useful for organizing data that needs to be displayed in rows and columns, such as product listings, schedules, or comparison charts. They provide a clear and organized way of presenting information, making it easier for users to understand and compare data.

HTML Table Tags

An HTML table is a markup language element used to display data in rows and columns on a web page. It is created using tags such as <table>, <tr>, and <td>, which define the structure and content of the table. HTML tables can be used for displaying tabular data or for layout purposes, and can be styled using CSS.

Create an HTML table

An HTML table is made up of a series of tags that define the structure and content of the table. The most basic tags used to create a table are the <table>, <tr>, and <td> tags.

1. The <table> tag defines the table itself.
2. The <tr> tag defines a table row.
3. The <td> tag defines a table cell.

Following are the basic steps to create an HTML table:

1. Open an HTML document in a text editor or IDE.
2. Begin the table by using the <table> tag.
3. Inside the <table> tag, create the table rows using the <tr> tag. Each <tr> tag represents a row in the table.
4. Inside each row, create the cells using the <td> tag. Each <td> tag represents a cell in the table.
5. Close the table by using the closing </table> tag.

Following is an example of a basic HTML table that displays some simple data:

 Browser View

Item	Price
Gadgets	$9.99
Frames	$14.99
Plates	$19.99

This table has one header row with two columns, and three data rows with two columns each. The <td> tags define the content of each cell, and the <tr> tags define the rows.

HTML Table Caption

You can also add a caption to the table by using the <caption> tag:

 Browser View

Product Prices

Item	Price
Gadgets	$9.99
Frames	$14.99
Plates	$19.99

In the above example, the <caption> tag is used to add a title to the table that describes what the table is showing.

Width and height of an HTML table

To specify the width and height of an HTML table, you can use various methods including HTML attributes, CSS properties, or a combination of both.

Using HTML attributes:

You can use the width and height attributes to specify the width and height of the table. These attributes are applied to the <table> tag.

 Browser View

Column 1, Row 1	Column 2, Row 1
Column 1, Row 2	Column 2, Row 2

This will create a table with a width of 500 pixels and a height of 300 pixels.

Using CSS properties:

You can use the width and height properties to specify the width and height of the table. These properties can be applied to the <table> tag, or to a CSS class that is applied to the table. For example:

This will create a table with a width of 500 pixels and a height of 300 pixels.

Using both HTML attributes and CSS properties:

You can also combine HTML attributes and CSS properties to specify the width and height of the table. For example:

 Browser View

Column 1, Row 1	Column 2, Row 1
Column 1, Row 2	Column 2, Row 2

This will create a table with a width of 500 pixels and a height of 300 pixels.

Specifying the width and height of table cells

You can also specify the width and height of individual table cells using the width and height attributes, or the corresponding CSS properties.

 Browser View

Column 1, Row 1	Column 2, Row 1
Column 1, Row 2	Column 2, Row 2

This will create a table where each cell has a specified width and height.

Add borders to an HTML table

To add borders to an HTML table, you can use either HTML attributes or CSS properties. Here are a few ways to add borders to your table:

Using HTML attributes:

You can use the border attribute to add a border to your table. This attribute takes an integer value that specifies the width of the border in pixels.

 Browser View

Cell 1	Cell 2
Cell 3	Cell 4

This will create a table with a border of width 1 pixel.

Using CSS properties:

You can use the border property to add a border to your table. This property takes a value that specifies the width, style, and color of the border.

This will create a table with a border of width 1 pixel, a solid style, and black color.

Adding borders to individual cells:

You can also add borders to individual cells using the border attribute or the corresponding CSS properties (border-width, border-style, and border-color).

 Browser View

Cell 1	Cell 2
Cell 3	Cell 4

This will create a table where each cell has a border of width 1 pixel, a solid style, and black color.

Add a hyperlink to an HTML table cell

To add a hyperlink to an HTML table cell, you can use the <a> tag, which is used to create links. Here is an example of how you can add a hyperlink to a table cell:

 Browser View

Click here to go to example.com

In the above example, the <a> tag is used to create a link to "http://example.com". The text "Click here" is the clickable text for the link, and the rest of the text is displayed after the link. When the user clicks on the link, they will be taken to the specified URL.

You can also use the target attribute to specify how the link should be opened. For example, you can use _blank to open the link in a new window or tab:

 Browser View

Click here to go to example.com

In the above example, the link will be opened in a new window or tab when the user clicks on it.

Add images to an HTML table

To add images to an HTML table, you can use the <img> tag. Following is an example of how you can add an image to a table cell:

 Browser View

In this example, the <img> tag is used to insert an image into a table cell. The src attribute specifies the source file of the image (in this case, "image.jpg"), and the alt attribute provides a text description of the image in case it cannot be displayed.

You can also use other attributes to further customize the image, such as width, height, border, and align.

 Browser View

In the above example, the width and height attributes specify the size of the image in pixels, the border attribute adds a border to the image, and the align attribute centers the image within the cell.

Conclusion:

The purpose of an HTML table is to provide a flexible and effective way of presenting data and content on a web page, while also ensuring that the content is accessible to all users.