Menu
Table is a block element. So when one table element is closed and another table element is started next to it, new table should flow under first table.
In the following code, second table (sport and champion) flows right of first table(author and book).
Why does it not flow under first table ? I have to provide line breaks so that next table flows under previous table.
[code]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Welcome To First Page</title>
</head>
<body>
<h1><font color=#9900ff>Welcome To First Page</font></h1>
<p>This page provides information about various famous books and their authors, famous sports and champions, countries and their capitals, famous Indian politicians and their states</p>
<h3><font color=”#888888″>Famous authors and their books</font></h3>
<table width=”300″ border=”1″ align=”left” cellpadding=”2″ cellspacing=”2″ bgcolor=”#CCFF00″ rules=”rows”>
<tr>
<th> Author</th> <th> Book</th>
</tr>
<tr>
<td> J K Rowling</td> <td> Harry Potter</td>
</tr>
<tr>
<td> George Lucas</td> <td> Star Wars</td>
</tr>
<tr>
<td> Kalhan</td> <td> Rajtarangini</td>
</tr>
<tr>
<td> Kshudrak</td> <td> Mruchchhkatikam</td>
</tr>
</table>
<h3><font color=”#888888″>Famous sports and champions in that sport</font></h3>
<table width=”300″ border=”1″ cellpadding=”2″ cellspacing=”2″ bgcolor=”#00FFaa” rules=”rows”>
<tr>
<th> Sport</th> <th> Champions</th>
</tr>
<tr>
<td> Soccer</td> <td> Germany, Italy, Spain, Brazil</td>
</tr>
<tr>
<td> Cricket</td> <td> India, Australia, South Africa</td>
</tr>
<tr>
<td> Tennis</td> <td> Serbia, Spain, USA</td>
</tr>
<tr>
<td> Hockey</td> <td> Netherlands, Australia, India</td>
</tr>
</table>
<p></p><br><br><br><br><br><br><br><br>
<h3><font color=”#888888″>Arab countries and their capoitals , where revolt took place </font></h3>
<table width=”300″ border=”1″ align=”left” cellpadding=”2″ cellspacing=”2″ bgcolor=”#aa0022″ rules=”rows”>
<tr>
<th>Country</th> <th>Capital</th>
</tr>
<tr>
<td> Syria</td> <td> Damascus</td>
</tr>
<tr>
<td> Yemen</td> <td> Sana’a</td>
</tr>
<tr>
<td> Libya</td> <td> Tripoli</td>
</tr>
<tr>
<td> Sudan</td> <td> Khartoum</td>
</tr>
</table>
<p></p><br><br><br><br><br><br><br><br>
<h3><font color=”#888888″>Famous Indian states, their chief ministers and reason what they are known for</font></h3>
<table width=”300″ border=”1″ align=”right” cellpadding=”2″ cellspacing=”2″ bgcolor=”yellow” rules=”rows”>
<tr>
<th>State</th> <th>Team members</th>
</tr>
<tr>
<td> Gujarat, Narendra Modi</td> <td><table> <tr><td>Jay Narayan Vyas</td><tr><td>Anandiben Patel</td></tr><tr><td>Vajubhai Vala</td></tr></table></td>
</tr>
<tr>
<td>Madhya Pradesh, Shivraj Chauhan </td> <td><table> <tr><td>Kailash Vijayvargiy</td><tr><td>Babulal Gaur</td></tr><tr><td>Archana Chitnis</td></tr></table></td>
</tr>
<tr>
<td> Bihar, Nitish Kumar</td> <td> <table> <tr><td> Vijay Kumar Chaudhary</td><tr><td>Giriraj Singh</td></tr><tr><td>Prem Kumar</td></tr></table></td>
</tr>
<tr>
<td> Ashok Gehlot, Rajasthan</td> <td> <table> <tr><td> Parsadi Lal Meena</td><tr><td>Shanti Kumar Dhariwal</td></tr><tr><td>Ashok Bairwa</td></tr></table></td>
</tr>
</table><p></p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<hr></hr>
</body>
</html>