Tables-Page2
TABLES-Page 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Tables</title>
</head>
<body>
TABLE # 1
<h2>BASIC TABLE STRUCTURE</h2>
<table border="3" width="40%">
<tr>
<td>cell1</td>
<td>cell2</td>
<td>cell3</td>
</tr>
<tr>
<td>cell4</td>
<td>cell5</td>
<td>cell6</td>
</tr>
<tr>
<td>cell7</td>
<td>cell8</td>
<td>cell9</td>
</tr>
</table>
<h2>How to Add a Table Heading in HTML</h2>
<!-- The <th> is used to add headings to tables. Normallly,<th></th> occupies the first row. By default the text passed in the Heading is centered and Bold.
An example with use of <th> -->
TABLE # 2
<table border="" width="50%">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email Address</th>
</tr>
<tr>
<td>Hillary</td>
<td>Nyakundi</td>
<td>tables@mail.com</td>
</tr>
<tr>
<td>Lary</td>
<td>Mak</td>
<td>developer@mail.com</td>
</tr>
</table>
<h2>How to Add a Caption to a Table</h2>
<!-- The main use of adding a caption to table is to provide a description about the data represented in the table.
The caption can either be placed at the top of the table or the bottom and by default it will always be centered.
To insert a caption into a table, use the <caption> tag. -->
TABLE # 3
<table border="" width="30%">
<!-- <caption>Free Coding Resources</caption> -->
<tr>
<th>Sites</th>
<th>Youtube Channels</th>
<th>Mobile Appss</th>
</tr>
<tr>
<td>Freecode Camp</td>
<td>Freecode Camp</td>
<td>Enki</td>
</tr>
<!-- <caption>Free Coding Resources</caption> -->
<tr>
<td>W3Schools</td>
<td>Academind</td>
<td>Programming Hero</td>
</tr>
<tr>
<td>Khan Academy</td>
<td>The Coding Train</td>
<td>Solo learn</td>
</tr>
<caption>Free Coding Resources</caption>
</table>
<h2>How to Use the Scope Attribute in HTML Tables</h2>
<p>"scope" attribute is declared in the header cell <th>, and it takes the values col, row, colgroup and rowgroup.
It declares the header title is either for column or row.
<br><br> <strong>scope="col</strong>
</p>
TABLE # 4
<table border="" width="30%">
<tr>
<th> </th>
<!-- leave the cell with no content empty -->
<th scope="col">Semester</th>
<th scope="col">Grade</th>
</tr>
<tr>
<td>1</td>
<td>Jan - April</td>
<td>Credit</td>
</tr>
<tr>
<td>2</td>
<td>May - August</td>
<td>Pass</td>
</tr>
<tr>
<td>2</td>
<td>September - December</td>
<td>Distinction</td>
</tr>
</table>
TABLE # 5
<h3>Another Example with scope="row"</h3>
<table border="5" width="60%">
<tr>
<th></th>
<th scope="col">Saturday</th>
<th scope="col">Sunday</th>
</tr>
<tr>
<th scope="row">Tickets sold:</th>
<td>120</td>
<td>135</td>
</tr>
<tr>
<th scope="row">Total sales:</th>
<td>$600</td>
<td>$675</td>
</tr>
</table>
<h2> How to Use Cell Spanning in an HTML Table</h2>
<p> The stretch across two or more columns or rows in a table is called cell spanning.<br>
This is done by using two cell attributes, 'colspan' for horizontal spanning and ;<br>
"rowspan" for vertical spanning.<br> The two attributes are assigned numbers greater that zero which shows the number of cells you wish to span.
</p>
An Example with use of span
TABLE # 6
<table border="" width="40%">
<tr>
<th>Name</th>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td rowspan = "2">Hillary</td>
<td>Advanced Web</td>
<td>75</td>
</tr>
<tr>
<td>Operating Syatem</td>
<td>60</td>
</tr>
<tr>
<td rowspan = "2">Lary</td>
<td>Advanced Web</td>
<td>80</td>
</tr>
<tr>
<td>Operating Syatem</td>
<td>75</td>
</tr>
<tr>
<td></td>
<td colspan="3" >Total Average: 72.5</td>
</tr>
</table>
<!-- In the example above, we have a cell spanning of 2 cells in the rows and 3 cells in the column as indicated. We have managed to apply the span both vertically and horizontally.
When using the attributes colspan and rowspan, make sure to declare the values assigned correclty to avoid overlapping of cells.
-->
<h1>How to Add a Table Header,Body &Footer</h1>
<!-- Just like how a website or any other document has three main sections – the header, body, and footer – so does a table.
In a table they are divided by using attributes namely:
<thead> - provides a separate haeder for the table
<tbody> - conatins main content of the table
<tfoot> - creates a separete footer for the table
An Example with use of <thead>, <tbody> & <tfoot> -->
TABLE # 7
<table border="">
<thead>
<tr>
<th colspan="2">October</th>
<th colspan="2">November</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sales</td>
<td>Profit</td>
<td>Sales</td>
<td>Profit</td>
</tr>
<tr>
<td>$200,00</td>
<td>$50,00</td>
<td>$300,000</td>
<td>$70,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan= "4">November was more produstive</th>
</tr>
</tfoot>
</table>
<p>In the above example, the header is represented by the name of the months,<br> the part with the figures of both sales and profit represents the table body,<br> and finally the part with the statement represents the footer of our table.,<br>
* Another important thing to note is that a table can have more than one body part. In a scenario like this each body groups the rows that are related together<p>
<h1>MY PRACTICE<br>
TABLE # 8</h1>
<table border="" width="60%">
<caption>Result to be Announced</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Subject</th>
<th scope="col">Marks</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">Hillary</td>
<td>Advanced Web</td>
<td>75</td>
</tr>
<tr>
<td>Operating System</td>
<td>60</td>
</tr>
<tr>
<td rowspan="2">Larry</td>
<td>Advanced Web</td>
<td>80</td>
</tr>
<tr>
<td>Operating System</td>
<td>75</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td colspan="2">Total Average:72.5</td>
</tr>
</tfoot>
</table>
<h1>TABLE # 9</h1>
<table border="" width="20%">
<tr>
<th colspan="2">October </th>
<th colspan="2">November</th>
</tr>
<tr>
<td>sales</td>
<td>profits</td>
<td>sales</td>
<td>profits</td>
</tr>
<tr>
<td>3000</td>
<td>5000</td>
<td>60000</td>
<td>40987</td>
</tr>
<tr>
<td colspan="4">November was more productive</td>
</tr>
</table>
<h1>TABLE # 10</h1>
<table border="" width="30%">
<tr>
<th></th>
<th>9am</th>
<th>10am</th>
<th>11am</th>
<th>12am</th>
</tr>
<tr>
<td>Monday</td>
<td colspan="2">Geography</td>
<td>Math</td>
<td>Art</td>
</tr>
<tr>
<td>Tuesday</td>
<td colspan="2">Gym</td>
<td colspan="2">Economics</td>
</tr>
</table>
<h1>TABLE # 11</h1>
<table border="6" width="30%"
cellpadding="30" cellspacing="5">
<!-- last two attributes belong to old codes -->
<!-- first row that has <thead></thead> defines column numbers -->
<tr>
<th></th>
<th scope="col">ABC</th>
<th scope="col">BBC</th>
<th scope="col">CNN</th>
</tr>
<tr>
<!-- then <td></td> folow the col numbers -->
<td>6pm-7pm</td>
<td rowspan="2">Movie</td>
<td>comedy</td>
<td>News</td>
</tr>
<tr>
<td>7pm-8pm</td>
<td>Sports</td>
<td>Current Affairs</td>
</tr>
</table>
<h1>TABLE # 12</h1>
<table border="4" width="600px">
<thead>
<tr>
<th></th>
<th scope="col">Home starter hosting</th>
<th scope="col">Premium business hosting</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Disk space</th>
<td>250mb</td>
<td>1gb</td>
</tr>
<tr>
<th scope="row">Bandwidth</th>
<td>5gb per month</td>
<td>50gb per month</td>
</tr>
<!-- more rows like the two above here -->
</tbody>
<tfoot>
<tr>
<td></td>
<td colspan="2">Sign up now and save 10%!</td>
</tr>
</tfoot>
</table>
</body>
</html>
Comments
Post a Comment