HTML Tables- Tutorialpath

Hello to all of you, thanks for landing on the TutorialPath.com, which is “Your Path to Learn Everything” in an easy way and you can learn almost every sort of important elements about online things. As you land here, so we can assume, you are a newbie for HTML Tables language, so you don’t need to worry about it.

Welcome to all our readers on our website at www.tutorialpath.com. As you all know that here on our website we will provide you lots of information related to the latest and newly introduced technology which help you to get updated with the latest tech. Here you will get all the useful information which is required in this tech world. As you know technology is one of the trending part in this world. So, here again we came up with a latest and new tech information which is related to the process of creating Basic HTML Tables for Beginners. With the help of this article you will get to know the complete process of how to create Basic HTML Tables for Beginners in a step by step manner. So, simply have a look to this article and grab all the useful information which is going to be very helpful for you.

HTML Tables

This page contains HTML table code – HTML codes for specifying or changing the look of your tables within your blog or web page.

HTML tables are created using the HTML <table> tag along with other tags that are nested inside it (such as the <tr> and <td> elements). The look and style of your tables is defined using Cascading Style Sheets (CSS).

Table Text

text table
table text

Output:

table output
table output

Table Heading

Table heading can be defined using <th> tag. This tag will be put to replace <td> tag, which is used to represent actual data cell. Normally you will put your top row as table heading as shown below, otherwise you can use <th> element in any row. Headings, which are defined in <th> tag are centered and bold by default.

Example:

Output:

 

Cellpadding and Cellspacing Attributes

There are two attributes called cellpadding and cellspacing which you will use to adjust the white space in your table cells. The cellspacing attribute defines space between table cells, while cellpadding represents the distance between cell borders and the content within a cell.

Example:

Output:

Colspan and Rowspan Attributes

You will use colspan attribute if you want to merge two or more columns into a single column. Similar way you will use rowspan if you want to merge two or more rows.

Example

Output:

How to merge table column

When you want to merge 2 or more then 2 column(cell) , use colspan Property of <td colspan=”2″> or <th colspan=”2″>.

table merge
table merge

Output:

table merge output
table merge output

How to merge table rows

When you want to merge 2 or more then 2 rows in a single row , use rowspan Property of <td rowspan=”2″> or <th rowspan=”2″>

table merge
table merge

Output:

table merge output
table merge output

Nested Table

Nested table means how to use table inside a table.
Multiple times you need to use table inside a table. when you want to use a table inside a table write the syntax of table in between your cell i.e eighter <td> or <th> .

Nested table
Nested table

Output:

Nested table output
Nested table output

Leave a Reply

Your email address will not be published.