Programs for Tables
by
Prof. A. Schlissel
<html>
<head>
<title>table1</title>
</head>
<body bgcolor=yellow text=black>
<h4>
<center>Table with one row, one col, and border=1</center><p>
<table border=1>
<tr>
<td>jack
</table>
</h4>
</body>
</html>
Click to view
<html>
<head>
<title>table2</title>
</head>
<body bgcolor=yellow text=black>
<h4>
<center>Table with one row, one col, and border=5</center><p>
<table border=5>
<tr>
<td>jack
</table>
</h4>
</body>
</html>
Click to view
<html>
<head>
<title>table3</title>
</head>
<body bgcolor=yellow text=black>
<h4>
<center>Table with one row and two cols</center><p>
<table border=5>
<tr>
<td>jack
<td>harry
</table>
</h4>
</body>
</html>
Click to view
<html>
<head>
<title>table4</title>
</head>
<body bgcolor=yellow text=black>
<h4>
<center>Table of width=100</center><p>
<table border=5 width=100>
<tr>
<td>jack
</table>
</h4>
</body>
</html>
Click to view
<html>
<head>
<title>table5</title>
</head>
<body bgcolor=yellow text=black>
<h4>
<center>Table of width=100 and height=100</center><p>
<table border=5 width=100 height=100>
<tr>
<td>jack
</table>
</h4>
</body>
</html>
Click to view
<html>
<head>
<title>table6</title>
</head>
<body bgcolor=yellow text=black>
<h4>
<center>Table using align and valign</center><p>
<table border=3 width=100 height=100>
<tr>
<td align=right valign=bottom>jack
</table>
</h4>
</body>
</html>
Click to view
<html>
<head>
<title>table7</title>
</head>
<body bgcolor=yellow text=black>
<h4>
<center>Table using percent of screen dimensions for width and height</center><p>
<table border=3 width=40% height=40%>
<tr>
<td align=center valign=center>jack
</table>
</h4>
</body>
</html>
Click to view
<html>
<head>
<title>table8</title>
</head>
<body bgcolor=yellow text=black>
<center>
<h4>
<center>Table using percent, align, and valign</center><p>
<table border=3 width=40% height=40%>
<tr>
<td align=center valign=middle>jack</td>
</table>
</center>
</h4>
</body>
</html>
Click to view
<html>
<head>
<title>table9</title>
</head>
<body bgcolor=yellow text=black>
<h4>
<center>
Centered table with one row, two cols, align and valign<p>
<table border=3 width=200 height=100>
<tr>
<td align=center valign=middle>jack
<td align=right valign=bottom>sally
</table>
</center>
</h4>
</body>
</html>
Click to view
<html>
<head>
<title>table10</title>
</head>
<body bgcolor=yellow text=black>
<h4>
<center>Table with one row and three cols</center><p>
<table border=3 width=200 height=100>
<tr>
<td align=center valign=center>jack
<td align=center valign=center>harry
<td align=center valign=center>sally
</table>
</h4>
</body>
</html>
Click to view
<html>
<head>
<title>table11</title>
</head>
<body bgcolor=yellow text=black>
<h4>
<center>Table with three rows and two cols</center><p>
<table border=3 width=200 height=100>
<tr>
<td align=center valign=center>jack
<td align=center valign=center>harry
<td align=center valign=center>sally
<tr>
<td align=center valign=center>phil
<td align=center valign=center>sam
<td align=center valign=center>gladis
</table>
</h4>
</body>
</html>
Click to view
<html>
<head>
<title>table12</title>
</head>
<body bgcolor=yellow text=black>
<h4>
<center>Table with three rows and three cols</center><p>
<table border=3 width=300 height=200>
<tr>
<td align=center valign=center>row 1 col 1
<td align=center valign=center>row 1 col 2
<td align=center valign=center>row 1 col 3
<tr>
<td align=center valign=center>row 2 col 1
<td align=center valign=center>row 2 col 2
<td align=center valign=center>row 2 col 3
<tr>
<td align=center valign=center>row 3 col 1
<td align=center valign=center>row 3 col 2
<td align=center valign=center>row 3 col 3
</table>
</h4>
</body>
</html>
Click to view
<html>
<head>
<title>table12b</title>
</head>
<body bgcolor=yellow text=black>
<h4>
<center>Table with three rows and three cols, aligned to the right</center><p>
<div align=right>
<table border=3 width=300 height=200>
<tr>
<td align=center valign=center>row 1 col 1
<td align=center valign=center>row 1 col 2
<td align=center valign=center>row 1 col 3
<tr>
<td align=center valign=center>row 2 col 1
<td align=center valign=center>row 2 col 2
<td align=center valign=center>row 2 col 3
<tr>
<td align=center valign=center>row 3 col 1
<td align=center valign=center>row 3 col 2
<td align=center valign=center>row 3 col 3
</table>
</div>
</h4>
</body>
</html>
Click to view
<html>
<head>
<title>table13</title>
</head>
<body bgcolor=yellow text=black>
<h4>
<center>Centered table, using widths for individual cells</center><p>
<div align=center>
<table border=3 width=200 height=100>
<tr>
<td align=center valign=middle width=50>jack</td>
<td align=right valign=bottom width=150>sally</td>
</table>
</div>
</h4>
</body>
</html>
Click to view
<html>
<head>
<title>table14</title>
</head>
<body bgcolor=yellow text=black>
<h4>
<center>Centered table, one row, three cols, cells have individual widths<p>
<table border=3 width=200 height=100>
<tr>
<td align=left valign=bottom width=25%>jack
<td align=center valign=center width=*>sally
<td align=right valign=bottom width=25%>phil
</table>
</center>
</h4>
</body>
</html>
Click to view
<html>
<head>
<title>table15</title>
</head>
<body bgcolor=yellow text=black>
<center>
<h4>
<center>
Two centered tables with different borders on one page<p>
table 1<p>
<table border=3 width=50 height=50>
<tr>
<td align=center valign=center>sally
</table>
<p>table 2<p>
<table border=25 width=50 height=50>
<tr>
<td align=center valign=center>harriet
</table>
</center>
</h4>
</body>
</html>
Click to view
<html>
<head>
<title>table16</title>
</head>
<body bgcolor=yellow text=black>
<h4>
<center>Table with two rows, three cols, and white bgcolor for the table</center><p>
<table border=3 width=300 height=200 bgcolor=white>
<tr>
<td align=center valign=center>row 1 col 1
<td align=center valign=center>row 1 col 2
<td align=center valign=center>row 1 col 3
<tr>
<td align=center valign=center>row 2 col 1
<td align=center valign=center>row 2 col 2
<td align=center valign=center>row 2 col 3
</table>
</h4>
</body>
</html>
Click to view
<html>
<head>
<title>table17</title>
</head>
<body bgcolor=yellow text=black>
<h4>
<center>Table with assigned bgcolor and for a row and some cells</center><p>
<table border=3 width=300 height=200 bgcolor=white>
<tr>
<td align=center valign=center bgcolor=red>row 1 col 1
<td align=center valign=center >row 1 col 2
<td align=center valign=center bgcolor=blue>row 1 col 3
<tr bgcolor=green>
<td align=center valign=center>row 2 col 1
<td align=center valign=center>row 2 col 2
<td align=center valign=center>row 2 col 3
</table>
</h4>
</body>
</html>
Click to view
<html>
<head>
<title>table18</title>
</head>
<body bgcolor=yellow text=black>
<h4>
<center>Table with colspan in row one</center><p>
<table border=3 width=300 height=200 bgcolor=white>
<tr>
<td align=center valign=center bgcolor=red colspan=2>row 1 col 1
<td align=center valign=center bgcolor=blue>row 1 col 3
<tr bgcolor=green>
<td align=center valign=center>row 2 col 1
<td align=center valign=center>row 2 col 2
<td align=center valign=center>row 2 col 3
</table>
</h4>
</body>
</html>
Click to view
<html>
<head>
<title>table19a</title>
</head>
<body bgcolor=yellow text=black>
<h4>
<center>rowspan in col one</center><p>
<table border=3 width=300 height=200 bgcolor=white>
<tr>
<td align=center valign=center bgcolor=red rowspan=2>row 1 col 1</td>
<td align=center valign=center >row 1 col 2</td>
<td align=center valign=center bgcolor=blue>row 1 col 3</td>
</tr>
<tr bgcolor=green>
<td align=center valign=center>row 2 col 2</td>
<td align=center valign=center>row 2 col 3</td>
</tr>
</table>
</h4>
</body>
</html>
Click to view
<html>
<head>
<title>table19b</title>
</head>
<body bgcolor=yellow text=black>
<h4>
<center>Table using align=center and valign=center</center><p>
<table border=0 width=300 height=200 bgcolor=white>
<tr>
<td align=center valign=center bgcolor=red rowspan=2>row 1 col 1
<td align=center valign=center >row 1 col 2
<td align=center valign=center bgcolor=blue>row 1 col 3
<tr bgcolor=green>
<td align=center valign=center>row 2 col 2
<td align=center valign=center>row 2 col 3
</table>
</h4>
</body>
</html>
Click to view
<html>
<head>
<title>table20</title>
</head>
<body bgcolor=yellow text=black>
<h4>
<center>A "normal" table with border=0</center><p>
<table border=0 width=200 height=200 bgcolor=white>
<tr>
<td align=center valign=center>row 1 col 1
<td align=center valign=center>row 1 col 2
<tr>
<td align=center valign=center>row 2 col 2
<td align=center valign=center>row 2 col 3
</table>
</h4>
</body>
</html>
Click to view
<html>
<head>
<title>table21</title>
</head>
<body bgcolor=yellow text=black>
<h4>
<center>Table with border=0, cellspacing=0, cellpadding=0</center><p>
<table border=0 width=150 height=150 bgcolor=white cellspacing=0 cellpadding=0>
<tr>
<td align=center valign=center>row 1 col 1
<td align=center valign=center>row 1 col 2
<tr>
<td align=center valign=center>row 2 col 2
<td align=center valign=center>row 2 col 3
</table>
</h4>
</body>
</html>
Click to view
<html>
<head>
<title>table22</title>
</head>
<body bgcolor=yellow text=black>
<h4>
<center>Table with border=0, cellspacing=10, cellpadding=0</center><p>
<table border=0 width=250 height=150 bgcolor=white cellspacing=10 cellpadding=0>
<tr>
<td align=center valign=center>row 1 col 1
<td align=center valign=center>row 1 col 2
<tr>
<td align=center valign=center>row 2 col 2
<td align=center valign=center>row 2 col 3
</table>
</h4>
</body>
</html>
Click to view
<html>
<head>
<title>table23</title>
</head>
<body bgcolor=yellow text=black>
<h4>
<center>Table with border=0, cellspacing=10, cellpadding=10</center><p>
<table border=0 width=250 height=150 bgcolor=white cellspacing=10 cellpadding=10>
<tr>
<td align=center valign=center>row 1 col 1
<td align=center valign=center>row 1 col 2
<tr>
<td align=center valign=center>row 2 col 2
<td align=center valign=center>row 2 col 3
</table>
</h4>
</body>
</html>
Click to view
<html>
<head>
<title>table24</title>
</head>
<body bgcolor=yellow text=black>
<h4>
<center>Table with border=5, cellspacing=10, cellpadding=10</center><p>
<table border=5 width=250 height=150 bgcolor=white cellspacing=10 cellpadding=10>
<tr>
<td align=center valign=center>row 1 col 1
<td align=center valign=center>row 1 col 2
<tr>
<td align=center valign=center>row 2 col 2
<td align=center valign=center>row 2 col 3
</table>
</h4>
</body>
</html>
Click to view
<html>
<head>
<title>table25</title>
</head>
<body bgcolor=yellow text=black>
<h4>
<center>Table with border=5, cellspacing=10, cellpadding=0</center><p>
<table border=5 width=250 height=150 bgcolor=white cellspacing=10 cellpadding=0>
<tr>
<td align=center valign=center>row 1 col 1
<td align=center valign=center>row 1 col 2
<tr>
<td align=center valign=center>row 2 col 2
<td align=center valign=center>row 2 col 3
</table>
</h4>
</body>
</html>
Click to view
<html>
<head>
<title>table26</title>
</head>
<body bgcolor=yellow text=black>
<h4>
<center>Table with border=5, cellspacing=15, cellpadding=10</center><p>
<table border=5 width=250 height=150 bgcolor=white cellspacing=15 cellpadding=10>
<tr>
<td align=center valign=center>row 1 col 1
<td align=center valign=center>row 1 col 2
<tr>
<td align=center valign=center>row 2 col 2
<td align=center valign=center>row 2 col 3
</table>
</h4>
</body>
</html>
Click to view
<html>
<head>
<title>art table27</title>
</head>
<body bgcolor=yellow text=black>
<h4>
<center>art</center><p>
<table border=0 width=300 height=300 >
<tr bgcolor=black >
<td colspan=4>a
<tr>
<td bgcolor=red>a
<td bgcolor=black>a
<td bgcolor=red>a
<td bgcolor=black>a
<tr>
<td bgcolor=black>a
<td bgcolor=red>a
<td bgcolor=black>a
<td bgcolor=red>a
<tr>
<td bgcolor=red>a
<td bgcolor=black>a
<td bgcolor=red>a
<td bgcolor=black>a
<tr bgcolor=black>
<td colspan=4>a
</table>
</h4>
</body>
</html>
Click to view
<html>
<head>
<title>table28</title>
</head>
<body bgcolor=yellow text=black>
<h4>
<center>Table with different size fonts in the cells</center><p>
<table>
<tr><td><h1>jack</h1>
<tr><td><h2>jack</h2>
<tr><td><h3>jack</h3>
<tr><td><h4>jack</h4>
<tr><td><h5>jack</h5>
<tr><td><h6>jack</h6>
</table>
</h4>
</body>
</html>
Click to view
<html>
<head>
<title>table29</title>
</head>
<body bgcolor=yellow text=black>
<h4>
<center>Table with different size fonts in the cells and different text colors</center><p>
<table>
<tr><td><h1><font color=red>jack</font></h1>
<tr><td><h2><font color=green>jack</font></h2>
<tr><td><h3><font color=purple>jack</font></h3>
<tr><td><h4><font color=blue>jack</font></h4>
<tr><td><h5><font color=orange>jack</font></h5>
<tr><td><h6><font color=white>jack</font></h6>
</table>
</h4>
</body>
</html>
Click to view
<html>
<head>
<title>table30</title>
</head>
<body bgcolor=yellow text=black>
<h4>
<center>Table with different text colors in one cell</center><p>
<table>
<tr>
<td>
<font size=+1 color=red>j</font>
<font size=+2 color=blue >a</font>
<font size=+3 color= green >c</font>
<font size=+4color= purple >k</font>
</table>
</h4>
</body>
</html>
Click to view
Back to HTML program page