<!DOCTYPE >
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Table Page</title>
</head>
<body>
<h1>Table Page</h1>
<ol>
<li>
<a href="#CUNY">CUNY</a>
</li>
<li>
<a href="#BMCC">BMCC</a>
</li>
</ol>
<ul>
<li>
<a href="#CUNY">CUNY</a>
</li>
<li>
<a href="#BMCC">BMCC</a>
</li>
</ul>
<p>
This lab exercise continues Lab #2 : Tables This lab exercise demonstrates
how align, calign colspan and rowspan work in HTML tables. The first 3
tables demonstrates how content is aligned horizontally(left, center ,
right ) and vertically (top, middle, bottom) in tabe cells. Table 4
demonstrates the use of colspan and row span to merge cells. Table 5
demonstrates how tables can be used to create a skeleton for a web page's
layout.
</p>
<table border="1px" cellpadding="10" width="500">
<caption align="bottom">
<strong>Table 2-1 :</strong
><br />
A simple 5x5 table with cellpadding = 10 and width = 500. Expanding the
width of the table allows you to see the default left alignmeent in the
table cells.
</caption>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
</tr>
</table>
<!-- tablr -->
<div> </div>
<table border="1px" cellpadding="10" width="500">
<caption align="bottom">
<strong>Table 2 :</strong
><br />
Adding Content to cells 1 and 6 allows you to see the defaultmiddle
vertical alignment.
</caption>
<tr>
<td>
1 <br />
2 <br />
3 <br />
4 <br />
5 <br />
6 <br />
7 <br />
8 <br />
9 <br />
10
</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>
<img src="./giraffe.png" width="107" height="148" alt="3 giraffe" />
</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
</tr>
</table>
<div> </div>
<table border="1px" cellpadding="10" width="500">
<caption align="bottom">
<strong>Table 3 :</strong
><br />
Demonstrating the use of the align and valign attributes.
</caption>
<tr>
<td>
1 <br />
2 <br />
3 <br />
4 <br />
5 <br />
6 <br />
7 <br />
8 <br />
9 <br />
10
</td>
<td>
Default vertical alignment = middle;
no valign attribute used in this cell.
</td>
<td valign="top">
3 <br />
valign="top"
</td>
<td valign="bottom">4 <br />valign="bottom"</td>
<td>5</td>
</tr>
<tr>
<td>
<img src="./giraffe.png" width="107" height="148" alt="3 giraffe" />
</td>
<td>Default alignment = left</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td align="center">12<br />align="center"</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>16</td>
<td align="right">17 <br />align="right"</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
</tr>
</table>
<div> </div>
<table border="1px" cellpadding="10" width="500">
<caption align="bottom">
<strong>Table 4 :</strong
><br />
Demonstrating the use of the colspan and rowspan attributes.
</caption>
<tr>
<td colspan="3">1 <br />colspan="3"</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td rowspan="4">
6 <br />
rowspan="4"
</td>
<td>7</td>
<td>8</td>
<td colspan="2" rowspan="3">
9<br />
colspan="2" and rowspan="3" together <br />
erge cells in 2 directions.
</td>
</tr>
<tr>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>17</td>
<td>18</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
</tr>
</table>
<div> </div>
<table border="1px" cellpadding="10" width="95%">
<caption align="bottom">
<strong>Table 2-5</strong
><br />
Demonstrating the use of the colspan and rowspan attributes to create a
webpage structure.<br />
Normally, you'd have border=0; the porder is made visible here for
demonstration purposes only.
</caption>
<tr>
<td colspan="4" align="center"><h1>This is a Header</h1></td>
</tr>
<tr>
<td rowspan="2" valign="top">
<h2>L Nav Bar</h2>
<ul>
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
<li>link 5</li>
</ul>
</td>
<td>Main content cell 1</td>
<td>Main content cell 2</td>
<td rowspan="2" valign="top">
<h2>R Nav Bar</h2>
<ul>
<li>link 6</li>
<li>link 7</li>
<li>link 8</li>
<li>link 9</li>
<li>link 10</li>
</ul>
</td>
</tr>
<tr>
<td>Main content cell 1</td>
<td>Main content cell 2</td>
</tr>
<tr>
<td colspan="4" align="center">
<p>
This is the footer,where you'd have your "Thanks, Cruzio" statement,
links to the validator and your "Last updated" statement.
</p>
</td>
</tr>
</table>
<div> </div>
<div> </div>
<footer align="center">
<a href="https://validator.w3.org/#validate_by_input">HTML</a> |
<a href="https://jigsaw.w3.org/css-validator/validator">CSS</a> | Last
update: 10-03-2020
</footer>
</body>
</html>
Anyway, eto na sya 
Keep it po sir nang marami kapong matulungan 