How To Define Html Table?

RSS
EMAIL
FACEBOOK
FACEBOOK
GOOGLE
GOOGLE
https://www.poftut.com/define-html-table/
PINTEREST
PINTEREST
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  Display Detailed System Information With Systeminfo For Windows Operating Systems

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  How To Create Database and Table In MySQL and MariaDB

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.

LEARN MORE  Javascript Syntax and Basics

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.

RSS
EMAIL
FACEBOOK
FACEBOOK
GOOGLE
GOOGLE
https://www.poftut.com/define-html-table/
PINTEREST
PINTEREST
INSTAGRAM

You may also like...

Leave a Reply

Your email address will not be published.

Enjoy this blog? Please spread the word :)