Scribd
Upload
13 views

05 HTML Cycle Tables

Uploaded by

kannankarthi3002
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
13 views

05 HTML Cycle Tables

Uploaded by

kannankarthi3002
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

Web Technology Lab - HTML Cycle 5 Page : 1/11

CYCLE : 5 – TABLES
1. Simple Tables
-----------------------------------------------------------------------
<html>
<body>

<p>
Each table starts with a table tag.
Each table row starts with a tr tag.
Each table data starts with a td tag.
</p>

<h4>One column:</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>

<h4>One row and three columns:</h4>


<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>

<h4>Two rows and three columns:</h4>


<table border="1">
<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>

SSM Polytechnic College Tirur Department of Computer Engineering 2005-2006


Web Technology Lab - HTML Cycle 5 Page : 2/11

CYCLE : 5 – TABLES
2. Different Table Borders
-----------------------------------------------------------------------
<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>

SSM Polytechnic College Tirur Department of Computer Engineering 2005-2006


Web Technology Lab - HTML Cycle 5 Page : 3/11

CYCLE : 5 – TABLES
3. Table with No Borders
-----------------------------------------------------------------------
<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>

SSM Polytechnic College Tirur Department of Computer Engineering 2005-2006


Web Technology Lab - HTML Cycle 5 Page : 4/11

CYCLE : 5 – TABLES

4. Headings in a Table
-----------------------------------------------------------------------
<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>

SSM Polytechnic College Tirur Department of Computer Engineering 2005-2006


Web Technology Lab - HTML Cycle 5 Page : 5/11

CYCLE : 5 – TABLES

5. Empty Cells
-----------------------------------------------------------------------
<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>

SSM Polytechnic College Tirur Department of Computer Engineering 2005-2006


Web Technology Lab - HTML Cycle 5 Page : 6/11

CYCLE : 5 – TABLES
6. Table with a Caption
-----------------------------------------------------------------------
<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>

7. Table Cells that Span more than one Row/Column


-----------------------------------------------------------------------
<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>

SSM Polytechnic College Tirur Department of Computer Engineering 2005-2006


Web Technology Lab - HTML Cycle 5 Page : 7/11

CYCLE : 5 – TABLES
8. Tags Inside a Table
-----------------------------------------------------------------------
<html>
<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>

SSM Polytechnic College Tirur Department of Computer Engineering 2005-2006


Web Technology Lab - HTML Cycle 5 Page : 8/11
CYCLE : 5 – TABLES
9. Cell Padding
(control the white space between cell content and the borders)
-----------------------------------------------------------------------
<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>

10. Cell Spacing (control the distance between cells)


-----------------------------------------------------------------------
<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>
SSM Polytechnic College Tirur Department of Computer Engineering 2005-2006
Web Technology Lab - HTML Cycle 5 Page : 9/11
CYCLE : 5 – TABLES
11. Add a Background Color or a Background Image to a Table
-----------------------------------------------------------------------
<html>
<body>

<h4>A background color:</h4>


<table border="1"
bgcolor="red">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

<h4>A background image:</h4>


<table border="1"
background="bgdesert.jpg">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

</body>
</html>

12. Add a Background Color or a Background Image to a Table Cell


-----------------------------------------------------------------------
<html>
<body>

<h4>Cell backgrounds:</h4>
<table border="1">
<tr>
<td bgcolor="red">First</td>
<td>Row</td>
</tr>
<tr>
<td
background="bgdesert.jpg">
Second</td>
<td>Row</td>
</tr>
</table>

</body>
</html>

SSM Polytechnic College Tirur Department of Computer Engineering 2005-2006


Web Technology Lab - HTML Cycle 5 Page : 10/11

CYCLE : 5 – TABLES
13. Align the Content in a Table Cell
-----------------------------------------------------------------------
<html>
<body>

<table width="400" border="1">


<tr>
<th align="left">Money spent on....</th>
<th align="right">January</th>
<th align="right">February</th>
</tr>
<tr>
<td align="left">Clothes</td>
<td align="right">$241.10</td>
<td align="right">$50.20</td>
</tr>
<tr>
<td align="left">Make-Up</td>
<td align="right">$30.00</td>
<td align="right">$44.45</td>
</tr>
<tr>
<td align="left">Food</td>
<td align="right">$730.40</td>
<td align="right">$650.00</td>
</tr>
<tr>
<th align="left">Sum</th>
<th align="right">$1001.50</th>
<th align="right">$744.65</th>
</tr>
</table>

</body>
</html>

SSM Polytechnic College Tirur Department of Computer Engineering 2005-2006


Web Technology Lab - HTML Cycle 5 Page : 11/11

CYCLE : 5 – TABLES
14. The New Frame Attribute
-----------------------------------------------------------------------
<html>
<body>

<p>
If you see no frames around the tables in these examples, your browser
is too old, or does not support it.
</p>

<h4>With frame="border":</h4>
<table frame="border">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

<h4>With frame="box":</h4>
<table frame="box">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

<h4>With frame="void":</h4>
<table frame="void">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

<h4>With frame="above":</h4>
<table frame="above">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

<h4>With frame="below":</h4>
<table frame="below">
<tr>
<td>First</td>
<td>Row</td>
SSM Polytechnic College Tirur Department of Computer Engineering 2005-2006
Web Technology Lab - HTML Cycle 5 Page : 12/11
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

<h4>With frame="hsides":</h4>
<table frame="hsides">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

<h4>With frame="vsides":</h4>
<table frame="vsides">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

<h4>With frame="lhs":</h4>
<table frame="lhs">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

<h4>With frame="rhs":</h4>
<table frame="rhs">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

</body>

</html>

SSM Polytechnic College Tirur Department of Computer Engineering 2005-2006

You might also like