Hi zerox,
Your code is a little bit off as you are closing the table </table> before you have finished opening it. The following would be the correct way to produce two tables, one after the the other:
HTML Code:
<table width="100%" border="1" bordercolor="red" cellspacing="0">
<tr>
<td> hello all </td>
</tr>
</table>
<table width="10%" border="1" bordercolor="blue" cellspacing="0">
<tr>
<td> Menu's</td>
</tr>
</table>
The above code will give you two tables, one with a red border 100% wide, and a second table 10% wide with a blue border. As the code stands, these tables will (or at least they should), touch each other.
Now, there are a number of options you can use to separate these tables and you weren't too far off with your initial thoughts for two of these methods. Unfortunately, whilst both methods will work, they do not give you very much control over how much space is added between the tables. A single <br> tab will only move the next piece of code down one line (which already happens anyway) and the tables will still touch each other. In order for the line break method to work, you would have to add 2 <br> tags like so:
HTML Code:
<!-- code for first table here-->
</table>
<br><br>
<table width="10%" border="1" bordercolor="blue" cellspacing="0">
<!-- code for table 2 goes here -->
Moving on to the paragraph method, you would (I think, because it is a long time since I have coded this way) have to enclose both tables in <p></p> tags like this:
HTML Code:
<p>
<table>
<!-- code for first table here-->
</table>
</p>
<p>
<table>
<!-- code for second table here-->
</table>
</p>
This should create space between the two tables, but again, you will have little or no control over the amount of space produced by the browser.
The way I would do this is to employ something called Cascading Style Sheets (CSS), which is a whole subject in its own right. As you are new to coding, I will keep this very simple and utilise css within the table tags like this:
HTML Code:
<table width="100%" border="1" bordercolor="red" cellspacing="0" style="margin-bottom:10px;">
<tr>
<td> hello all </td>
</tr>
</table>
<table width="10%" border="1" bordercolor="blue" cellspacing="0" style="margin-top:5px;">
<tr>
<td> Menu's</td>
</tr>
</table>
The style element lets you set many attributes but in this case, I have restricted it to just the amount of space to be given at the bottom of the first table and the top of the second. By setting both these values, they are added together and in this case will give a gap of 15 pixels between the two tables. You can set them to any value you wish, so play around with what feels and looks right.
Having (hopefully) answered your question, I would urge you to consider the code you are learning as some of the tags you are using are no longer standards compliant (
<br> should now be presented as
<br />) and there is a big move now to seperate design style from content by using CSS.
The following link should help you get a better idea on HTML, XHTML and CSS and includes loads of tutorials on coding and using these technologies.
w3schools
Hope this has been helpful,
Regards
Ian
