How To Define Html Table?

RSS
FACEBOOK
FACEBOOK
PINTEREST
PINTEREST
LINKEDIN
INSTAGRAM

Html Table is used to present structured data in the web pages. Html table was very popular in previous days but with the more dynamic applications and div usage it loss some of its popularity. In this tutorial we will look basic table features.

Define Html Table

Table definition might be seen a bit confusing but it is actually not so complex. We will use <table> , <tr> , <th> , <td> tags. We will look in detail these tags.

Table Row

Table rows are presented with <tr> tag. <tr> tags are inserted into <table> tags like below.

Table Header

Table headers are used to describe table columns. <th> is used for table header tag. Table headers are put into first table row.

LEARN MORE  How To List MySQL Tables with "show tables" SQL Query

Table Data

Table data represented with <td> tag and holds the data we want to show in table cells.Table data is put into table rows according to table header count.

Add Border To Table

By default html tables do not have any visible border. In order to show borders we need to add border style to the table style.

Add Border To Table

Add Border To Table

 

LEARN MORE  What Is URL (Uniform Resource Locator)?

Table Cells Those Span Multiple Columns

In some situations we may need to span single cell into multiple columns. In this situations we will use colspan attribute of table header with the span count. For example we want to use single Phone number header but get two phone number with two cells.

Table Cells Those Span Multiple Columns

Table Cells Those Span Multiple Columns

Table Cells Those Span Multiple Rows

Another span example is using multiple rows for single data. We will use rowspan attribute in table header with the number or rows.

Table Cells Those Span Multiple Rows

Table Cells Those Span Multiple Rows

Adding Caption To Html Table

We can add caption to the Html table with <caption> tag. Caption will be shown before table and will not put into cells.

Adding Caption To Html Table

Adding Caption To Html Table

Html Table Styling

We can set general styling for all <table> tags by using CSS in the header part of the Html page.

LEARN MORE  How To Create Database and Table In MySQL and MariaDB?

RSS
FACEBOOK
FACEBOOK
PINTEREST
PINTEREST
LINKEDIN
INSTAGRAM

Leave a Reply

Your email address will not be published. Required fields are marked *

Enjoy this blog? Please spread the word :)