Tables in HTML

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

Are you know that Webpage manually created by tables, in a basic web development web developer, was make 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-in-HTML



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:



Example:


<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 



output-tables-code



Cell spacing & Cell padding

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

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

OUTPUT:

Cell-spacing-define


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:

Cell-Padding-image


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.


Example:



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



Student-information



HTML Headers


Use Of Thread, Tfoot, Tbody

The advance 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.


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:

output-thead-tables




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



COMMENTS

Name

Blogging,9,How to,24,Make Money,10,SEO,16,Tricks & Tips,1,Web Designing,11,Web Development,8,
ltr
item
Weblog Tricks - Learn Everything About Web : 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
https://1.bp.blogspot.com/-hpu4U5VhRd0/WEZ7MBtdqSI/AAAAAAAAAIk/AbxwB5H3LFwGhrg1cBAPL6AqSlTG_MpKgCLcB/s640/Presentation1.jpg
https://1.bp.blogspot.com/-hpu4U5VhRd0/WEZ7MBtdqSI/AAAAAAAAAIk/AbxwB5H3LFwGhrg1cBAPL6AqSlTG_MpKgCLcB/s72-c/Presentation1.jpg
Weblog Tricks - Learn Everything About Web
http://www.weblogtricks.com/2016/12/tables-in-html.html
http://www.weblogtricks.com/
http://www.weblogtricks.com/
http://www.weblogtricks.com/2016/12/tables-in-html.html
true
3158682668530211189
UTF-8
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