Tables in HTML

Tables are very useful in HTML Table structure if you have knowledge about tables so you can also create a better structure web pages layout of your website,

Are you know that Webpage manually created by tables, in a basic web development web developer, made a layout in HTML with help of tables.

but in nowadays content management system (CMS) is also use like WordPress, Joomla Blogger easily can make the 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 HTML TD (Table Data).

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

about tags, you can find the best knowledge HTML tags and elements.

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>



HTML Headers

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 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 a simple tutorial on tables if you Like this that you can share with your friends...



Blogging,15,C Language,3,How to,30,Make Money,11,SEO,28,Web Development,25,
Weblog Tricks - Blogging Tricks for Beginners: Tables in HTML
Tables in HTML
Tables in HTML CSS ,style, attributes, html table border,column width, row columns, sell spacing and cell padding and aslo head footer of tables in html
Weblog Tricks - Blogging Tricks for Beginners
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