Welcome to TechRiz Where tech enthusiasts come for the latest tech news, Free downloads, free tutorials, articles and how to's. Description: This is the TechRiz Free Tutorials page. Visit every day to stay informed about the latest tech news, from security alerts to Hardware and software updates. Enjoy your stay. Week-3 Different table borders
Code: <html> <body>
<h4>With a normal border:</h4> <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table>
<h4>With a thick border:</h4> <table border="8"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table>
<h4>With a very thick border:</h4> <table border="15"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table>
</body> </html>
Result: With a normal border:
With a thick border:
With a very thick border:
Table with no borders
Code: <html> <body>
<h4>This table has no borders:</h4> <table> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table>
<h4>And this table has no borders:</h4> <table border="0"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table>
</body> </html>
Result: This table has no borders:
And this table has no borders:
Heading in a table
Code: <html> <body>
<h4>Table headers:</h4> <table border="1"> <tr> <th>Name</th> <th>Telephone</th> <th>Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table>
<h4>Vertical headers:</h4> <table border="1"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th>Telephone:</th> <td>555 77 854</td> </tr> <tr> <th>Telephone:</th> <td>555 77 855</td> </tr> </table>
</body> </html>
Result: Table headers:
Vertical headers:
Empty Cells
Code: <html> <body>
<table border="1"> <tr> <td>Some text</td> <td>Some text</td> </tr> <tr> <td></td> <td>Some text</td> </tr> </table>
<p> As you can see, one of the cells has no border. That is because it is empty. Try to insert a space in the cell. Still it has no border. </p>
<p> The trick is to insert a no-breaking space in the cell. </p>
<p>No-breaking space is a character entity. If you don't know what a character entity is, read the chapter about it. </p>
<p>The no-breaking space entity starts with an ampersand ("&"), then the letters "nbsp", and ends with a semicolon (";") </p>
<p> </p>
</body> </html>
Result:
As you can see, one of the cells has no border. That is because it is empty. Try to insert a space in the cell. Still it has no border. The trick is to insert a no-breaking space in the cell. No-breaking space is a character entity. If you don't know what a character entity is, read the chapter about it. The no-breaking space entity starts with an ampersand ("&"), then the letters "nbsp", and ends with a semicolon (";") Table with a caption
Code: <html> <body>
<h4> This table has a caption, and a thick border: </h4>
<table border="6"> <caption>My Caption</caption> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table>
</body> </html>
Result: This table has a caption, and a thick border:
My Caption
Table cells that span more than one row/olumn
Code: <html> <body>
<h4>Cell that spans two columns:</h4> <table border="1"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table>
<h4>Cell that spans two rows:</h4> <table border="1"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table>
</body> </html>
Result: Cell that spans two columns:
Cell that spans two rows:
Tags inside tables
Code: <body>
<table border="1"> <tr> <td> <p>This is a paragraph</p> <p>This is another paragraph</p> </td> <td>This cell contains a table: <table border="1"> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table> </td> </tr> <tr> <td>This cell contains a list <ul> <li>apples</li> <li>bananas</li> <li>pineapples</li> </ul> </td> <td>HELLO</td> </tr> </table>
</body> </html>
Result:
Cell padding (control the white space between the cells content and borders)
Code: <html> <body>
<h4>Without cellpadding:</h4> <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table>
<h4>With cellpadding:</h4> <table border="1" cellpadding="10"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table>
</body> </html>
Result: Without cellpadding:
With cellpadding:
Cell spacing (control the distance between cells)
Code: <html> <body>
<h4>Without cellspacing:</h4> <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table>
<h4>With cellspacing:</h4> <table border="1" cellspacing="10"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table>
</body> </html>
Result: Without cellspacing:
With cellspacing:
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
This site is viewed:
© Copyright Techriz, 2009. All Rights Reserved