How to Create Html Table in Html

Tables are very useful in HTML(HyperText Markup Language)  Today you will learn basic about tables it will help you for creating a better table in Html for web pages layout of your website,

Do you know that Webpages manually created by tables, in a basic web development web developer, made a layout in HTML with help of tables?

yes, that's true that web developers were made manually tables. but nowadays you can easily create tables and website by content management system (CMS) like WordPress, Joomla Blogger.


Basic Types of the list in Html

What are Formatting tags in HTML

what is table in HTML?

Tables are just like spreadsheets and they are made up of:

1. Rows

1. Columns.

Even though there is no longer any serious need to use tables for layout.

Tables can be used for displaying tabular data—calendars, schedules, exam results, product pages.

How to Create Html Table in Html and What is Table Tag in Html?

Tables are create by  <table> tag  in HTML.

Inside <table> element the table is written out row by row a row is contained inside a <tr> tag . which stands for Table Row.

Each cell is then written inside the row element using a <td> tag. which stands for HTML TD (Table Data).

Table heading can be defined using the <th> element. This tag will be put to replace the <td> tag.

I clearly write what is  HTML tags and elements. you can also read.

Normally we put our top row as table heading as shown below, otherwise, you  can use <th> element at any place:

HTML table examples

<TABLE BORDER=2>

<TR>
<TD>&nbsp;</TD>
<TH>10 am - noon</TH>
<TH>noon - 2 pm</TH>
<TH>2 pm - 4 pm</TH>
</TR>
<TR>
<TH>Monday</TH>
<TD>Home Ec</TD>
<TD>Math</TD>
<TD>Geography</TD>
</TR>
<TR>
<TH>Wednesday</TH>
<TD>History</TD>
<TD>Social Studies</TD>
<TD>Music</TD>
</TR>
</TABLE>

Output 

Table Cell spacing & Table Cell Padding

Cell spacing:

CELL SPACING controls the space between table cells.

<table border="1" cell spacing="10“>

OUTPUT:

Table Cell Padding:

CELL PADDING sets the amount of space between the contents of the cell and the cell wall.
<table border="1" cell padding="5" >

OUTPUT:

Table Col-span & Table Row-span

Col span:

col span attribute used with <TD> if you want to merge two or more columns into a single column.

Row span:

row span if you want to merge two or more rows.

HTML table cell Examle

<TABLE BORDER=2 CELLPADDING=4>
<TR>
<TD COLSPAN=4 BGCOLOR=“skyblue" align="center" > Students Information
</TD>
</TR>
<TR>
<TH ROWSPAN=3 BGCOLOR="#99CCFF">PHP</TH>
<TD>1153</TD>
<TD>Ahmed</TD>
<TD>Morning</TD>
</TR>
<TR>
<TD>2785</TD>
<TD>Asad</TD>
<TD>Afternoon</TD>
</TR>
<TR>
<TD>110</TD>
<TD>Manzoor</TD> <TD>Evening</TD>
</TR>
<TR>
<TH ROWSPAN=3 BGCOLOR="#99CCFF">
System Administration
</TH>
<TD>1566</TD><TD>Tariq</TD> <TD>Morning</TD>
</TR>
<TR>
<TD>784</TD><TD>Waheed</TD> <TD>Afternoon</TD>
</TR>
<TR>
<TD>222</TD><TD>Saleem</TD> <TD>Evening</TD>
</TR>
</TABLE>

OUTPUT:

HTML Table Header

Use Of Thread, Tfoot, Tbody

The advanced structure of the table is divided into three portions.

The three elements for separating the head, body, and foot of a table are:

<thead> - to create a separate table header.

<tbody> - to indicate the main body of the table.

<tfoot> - to create a separate table footer.

The body is the main content of the table.

A table may contain several <tbody> elements to indicate different data.

Example:

<table border="1" >
        <thead>                <tr>  <td colspan="4">This is the head of the table</td>
                </tr>
        </thead>
<tbody>
                <tr>
  <td>Cell 1</td>   <td>Cell 2</td>
  <td>Cell 3</td>   <td>Cell 4</td>                </tr>
                <tr>
  <td colspan = "4">       more rows here containing four cells.  </td>                </tr>
</tbody>
<tbody>
                <tr>
  <td>Cell 1</td>  <td>Cell 2</td>  <td>Cell 3</td>  <td>Cell 4</td>
                </tr>             <tr>
  <td colspan = "4">       more rows here containing four cells.  </td>              </tr> 
</tbody>
<tfoot>                <tr>
  <td colspan="4">         This is the foot of the table  </td>
                </tr>
        </tfoot>
</table>

OUTPUT:

So, Guys, this is a simple tutorial about tables in Html if you Like this that you can share with your friends...