Basic to Advance table design in HTML

Example 1
<!DOCTYPE>
<html>
<body>
<table border="1" bgcolor="lightpink" width="25%" height="250px" style="text-align: center;">

<tr><th>a</th><th>b</th></tr>
<tr><td colspan="2">c</td></tr>
</table>


</body>
</html>
Program Output
 
a b
c
 
Example 2
<!DOCTYPE>
<html>
<body>
<table border="1" bgcolor="yellow" width="50%" height="500px" style="text-align: center;">

<tr><th>a</th><th>b</th><th rowspan="2">c</th></tr>
<tr><td>d</td><td>e</td></th></tr>
<tr><td>f</td><td colspan="2">g</td></th></tr>
</table>


</body>
</html>
Program Output
 
a b c
d e
f g
 
Example 3
<!DOCTYPE>
<html>
<body>
<table border="1" bgcolor="pink" width="50%" height="250px" style="text-align: center;">

<tr><th>a</th><th>b</th><th rowspan="3">d</th></tr>
<tr><td colspan="2">c</td></tr>
<tr><td colspan="2">e</td></tr>
</table>


</body>
</html>
Program Output
 
a b d
c
e
 
Example 4
<!DOCTYPE>
<html>
<body>
<table border="1" bgcolor="yellow" width="50%" height="250px" style="text-align: center;">

<tr><th>a</th><th>b</th><th rowspan="2">c</th></tr>
<tr><td>d</td><td>e</td></tr>
<tr><td colspan="2">f</td><td rowspan="2">g</td></tr>
<tr><td>h</td><td>i</td></tr>
</table>


</body>
</html>
Program Output
 
a b c
d e
f g
h i
 
Example 5
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<table bgcolor="red" border="1" cellpadding="5" cellspacing="1" width="5%">

<tr bgcolor="red">
<td bgcolor="green" colspan="2">A</td>
<td rowspan="2">B</td>

</tr>

<tr>
<td rowspan="2" bgcolor="yellow">D
</td>
<td bgcolor="black" style="color: yellow;"> C</td>

</tr>
<tr bgcolor="yellow">
<td bgcolor="violate" colspan="2">E
</td>
</table>
</body>
</html>
Program Output
A B
D C
E
What is HTML
  • HTML is the standard  for Hypertext Markup Language for Web pages.
  • The HTML elements tell the browser ...
    Click Here
Previous topic next topic What is an Element in HTML
  • An Hypertext Markup Language(HTML) element ...
    Click Here
Previous topic next topic HTML Headings
  • The HTML headings are used to define the heading ...
    Click Here
Previous topic next topic HTML Formatting Elements
  • The <b>  element is use for bold text, without ...
    Click Here
Previous topic next topic HTML Comments
  • The HTML Comment are describe the extra feature about ...
    Click Here
Previous topic next topic HTML Attributes
  • Every HTML element can have attributes.
  • The HTML Attribute ...
    Click Here
Previous topic next topic HTML Images
  • The <img> tag is empty
Note: The empty ...
Click Here
Previous topic next topic HTML Links
  • HTML links are hyperlinks.
  • HTML link default color is ...
    Click Here
Previous topic next topic HTML Table
  • An HTML table is defined with the <table> tag.
  • ...
    Click Here
Previous topic next topic Table Backgrounds You can set the table background using one of the ...
Click Here
Previous topic next topic Table Header, tbody and Footer
  • Tables are categories into three parts: ...
    Click Here
Previous topic next topic Basic to Advance table design in HTML Example 1 <!DOCTYPE> <html> <body> ...
Click Here
Previous topic next topic HTML div tag
  • The <div>  element is used for style blocks ...
    Click Here
Previous topic next topic HTML Lists
  • The list is the way to present the data ...
    Click Here
Previous topic next topic HTML Form
  • The HTML <form> element is used to collect user ...
    Click Here
Previous topic next topic HTML Iframe Tag
  • <iframe> an inline frame with an HTML tag ...
    Click Here
English Hindi