Tables in HTML

Tables are very useful in HTML structure if you have knowledge about tables

so you can also create better structure webpages layout of your website, are you know that Webpage manually created by tables, in basic web development web developer was make layout in HTML with help of tables but in now days content management system (CMS) is also use like WordPress , Joomla Blogger easily can make webpage.


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

  1. Rows
  2. 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.You can create a table in HTML/X HTML by using  <table> tag.

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 Table Data.

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

about tags you can find best knowlege html tags and elements read below post.

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


<TH>10 am - noon</TH>
<TH>noon - 2 pm</TH>
<TH>2 pm - 4 pm</TH>
<TD>Home Ec</TD>
<TD>Social Studies</TD>



Cell spacing & Cell padding

Cell spacing:
CELL SPACING controls the space between table cells.

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



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" >



Col-span & 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.


<TD COLSPAN=4 BGCOLOR=“skyblue" align="center" > Students Information
<TD>Manzoor</TD> <TD>Evening</TD>
System Administration
<TD>1566</TD><TD>Tariq</TD> <TD>Morning</TD>
<TD>784</TD><TD>Waheed</TD> <TD>Afternoon</TD>
<TD>222</TD><TD>Saleem</TD> <TD>Evening</TD>



Use Of Thead, Tfoot, Tbody

The advance structure of 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 pages or groups of data.


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



So Guys this is simple tutorial on tables if you Like this that you can share to your friends..



Blogging,5,How to,9,Make Money,4,SEO,4,Tricks & Tips,4,Web Designing,10,Web Development,5,
Web Log Tricks: Tables in HTML
Tables in HTML
Tables in HTML CSS ,style, attributes, border,column width, row columns, sell spacing and cell padding and aslo head footer of tables in html
Web Log Tricks
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy