Outline
- Tables in HTML
- Attributes of <Table> tag
- Attributes of <tr> tag
- Attributes of <th> and <td> tags
- Tables Based Website Layout
- Creating complex tables
- Nested Tables
- Adding Wow Slider in Website
- Embedding / Adding youtube videos in website
Tables in HTML
Tables are used to represent data in columns and rows. HTML tables are created with <table> ...</table> element. <tr> element creates table row, <th> element creates table column headings, <td> element creates table data , <thead> element is used to group column headings , <tbody> is used to group table main body elements , <tfoot> is used to group table footer part elements . <thead>, <tbody>, <tfoot> are optional parts of tables.Following are some example of tables in HTML
Example # 1: Creating a simple table:
<!doctype html><html>
<head>
<title>Creating simple table in HTML 5 </title>
<meta charset=”utf-8”>
</head>
<body>
<table border='1'>
<tr>
<th>Sno</th>
<th>Name</th>
<th>Course</th>
</tr>
<tr>
<td>1</td>
<td>Ali Khan</td>
<td>MS Office</td>
</tr>
<tr>
<td>2</td>
<td>Jawad</td>
<td>Web Design</td>
</tr>
<tr>
<td>3</td>
<td>Moiz</td>
<td>PHP</td>
</tr>
</table>
</body>
</html>
Following is the output of above program:
 |
| simple table in HTML 5 |
Example # 2: using thead and tbody
<!doctype html>
<html>
<head>
<title>Creating simple table in HTML 5 </title>
<meta charset=”utf-8”>
</head>
<body>
<table border='1'>
<thead>
<tr>
<th>Sno</th>
<th>Name</th>
<th>Course</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Ali Khan</td>
<td>MS Office</td>
</tr>
<tr>
<td>2</td>
<td>Jawad</td>
<td>Web Design</td>
</tr>
<tr>
<td>3</td>
<td>Moiz</td>
<td>PHP</td>
</tr>
</tbody>
</table>
</body>
</html>
Attributes of <Table> tag
- bgcolor
- used to specify table background color
example: <table bgcolor="brown"> - background=url
- Used to specify table background image
example: <table background="Url Of Image"> - border = number
- Used to specify border thickness. border=0, means no border, border=1 means border with thickness 1, instead of 1 , you can specify a number according to your requirement.
<table border="1" > - bordercolor=color
- Specify border color,
Example: <table bordercolor="red" > - bordercolordark=color
- Used to specify border color with some shade , this attribute will not work in browsers except Microsoft Internet Explorer
Example:<table bordercolordark="red"> - bordercolorlight = color
- Used to specify border color with some shade , this attribute will not work in browsers except Microsoft Internet Explorer
Example:<table bordercolorlight="red"> - cellspacing = number
- This attribute is used to specify some space between cells of table. by default there is some default space between space, if we don't need it we can specify cellspacing=0, however if we need some extra space between cells, we can assign some value to cellspacing.
Example: <table cellspacing="50"> - cellpaddiing = number
- Cellpadding property can be used to set a space between content and border of cells. By default there is some default cell padding , if we don't need it we can specify cellpadding=0, however if we need some extra space between content and cell borders , we an assign some value to cellpadding.
Example: <table cellpadding="100"> - width = number
- Used to specify width of table, Width can take number or number of percentage.
Example:<table width="200"> or <table width="50%"> - height = number
- Used to specify height of table, Height can take number or number of percentage.
Example:<table height="200"> or <table height="50%"> - align = type (left / right / center )
- Used to set table alignment , means you can use this attribute to specify the position where you want to display table onto web pages, it takes three values left, right and center.
Example: align table on center
<table align="center">
Attributes of <tr> tag
- bgcolor
- used to specify background color of row
example: <tr bgcolor="green"> - bordercolor=color
- Specify border color of row
Example: <tr bordercolor="blue" > - bordercolordark=color
- Used to specify border color with some shade , this attribute will not work in browsers except Microsoft Internet Explorer
Example:<tr bordercolordark="orange"> - bordercolorlight = color
- Used to specify border color with some shade , this attribute will not work in browsers except Microsoft Internet Explorer
Example:<tr bordercolorlight="blue"> - height = number
- Used to specify height of row, Height can take number or number of percentage.
Example:<tr height="200"> or <tr height="50%"> - align = type (left/right/center/justify )
- Used to specify horizontal alignment of text in a row.
Example: align text on center in a row
<tr align="center"> - valign = type (top/bottom/baseline/middle )
- Used to specify vertical alignment of text in a row.
Example: vertically align text on center in a row
<tr valign="middle">
Attributes of <th>and <td> tags
- bgcolor
- used to specify background color of a cell
example: <th bgcolor="brown"> - background=url
- Used to specify background image of a cell
example: <th background="Url Of Image"> - bordercolor=color
- Specify border color,
Example: <th bordercolor="red" > - bordercolordark=color
- Used to specify border color with some shade , this attribute will not work in browsers except Microsoft Internet Explorer
Example:<th bordercolordark="red"> - bordercolorlight = color
- Used to specify border color with some shade , this attribute will not work in browsers except Microsoft Internet Explorer
Example:<th bordercolorlight="red"> - width = number
- Used to specify width of a cell, Width can take number or number of percentage.
Example:<th width="200"> or <th width="50%"> - height = number
- Used to specify height of cell, Height can take number or number of percentage.
Example:<th height="200"> or <th height="50%"> - align = type (left / right / justify / center )
- Used to set horizontal alignment of text in a cell ,
Example: horizontally align text on center
<th align="center"> - valign = type (top / bottom / baseline / middle )
- Used to set vertical alignment of text in a cell ,
Example: vertically align text on center
<th valign="middle"> - colspan = number
- Used to span a cell into multiple columns
Example: span cell into 2 columns
<th colspan="2"> - rowspan = number
- Used to span a cell into multiple rows ,
Example: span cell into two rows
<th rowspan="2">
Using colspan and rowspan attributes in tables
Code:
<!doctype html>
<html>
<head>
<title>Using colspan and rowspan attributes </title>
<meta charset=”utf-8”>
</head>
<body>
<table border="1">
<tr>
<th rowspan="2">Sno</th>
<th rowspan="2">Name</th>
<th colspan="5">Subjets</th>
<th rowspan="2">T.Marks</th>
<th rowspan="2">Obt.Marks</th>
</tr>
<tr>
<th>Eng</th>
<th>Phys</th>
<th>Chem</th>
<th>Math</th>
<th>CS</th>
</tr>
<tr>
<td>1</td>
<td>Ali</td>
<td>50</td>
<td>80</td>
<td>78</td>
<td>55</td>
<td>60</td>
<td>100</td>
<td>323</td>
</tr>
<tr>
<td>2</td>
<td>Moiz</td>
<td>80</td>
<td>92</td>
<td>77</td>
<td>60</td>
<td>56</td>
<td>100</td>
<td>365</td>
</tr>
<tr>
<td>3</td>
<td>Hamza</td>
<td>85</td>
<td>90</td>
<td>77</td>
<td>60</td>
<td>56</td>
<td>100</td>
<td>368</td>
</tr>
</table>
</body>
</html>
Output:
Creating Website layout with table:
In previous video tutorial we have created a simple website layout using css , now we are creating same website layout using table.
Code:
<!doctype html>
<html>
<head>
<title>Nested List Example</title>
<meta charset="utf-8">
<style>
*{
padding:0px;
margin:0px;
}
body
{
background: lightgray;
color:white;
font-size: 2em;
margin-left:10%;
margin-right: 10%;
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td bgcolor="brown" height="150" align="center" valign="middle" colspan="2">
Header
</td>
</tr>
<tr>
<td bgcolor="lime" height="40" align="center" valign="middle" colspan="2">
Navigation
</td>
</tr>
<tr>
<td bgcolor="skyblue" height="500" align="center" valign="middle" width="80%">
Main Content Area
</td>
<td bgcolor="darkblue" height="500" align="center" valign="middle" width="20%">
Sidebar
</td>
</tr>
<td bgcolor="black" height="150" align="center" valign="middle" colspan="2">
Footer
</td>
</table>
</body>
</html>
Output:
 |
| website layout created with table |
0 Comments:
Post a Comment