How to Create Html Table in Html

SHARE:

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

How to Create Html Table 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 



html table examples



Table Cell spacing & Table Cell Padding

Cell spacing:

CELL SPACING controls the space between table cells.

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

OUTPUT:

Cell-spacing-define


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:

Cell-Padding-image


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:



Student-information



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:

output-thead-tables




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



COMMENTS

Name

Blogging,15,C Language,3,How to,26,Make Money,11,SEO,27,Web Development,24,
ltr
item
Weblog Tricks - Helping You Succeed To Become an entrepreneur: How to Create Html Table in Html
How to Create Html Table in Html
How to Create Html Table in Html html table design examples with code What is Table Header and html table style
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 - Helping You Succeed To Become an entrepreneur
https://www.weblogtricks.com/2016/12/tables-in-html.html
https://www.weblogtricks.com/
https://www.weblogtricks.com/
https://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