TechOceanhub
TechOceanhub
| Tag | Description |
| <table> | a table tag |
| <caption> | a table caption |
| <th> | a header cell in a table |
| <tr> | a row in a table |
| <td> | a cell in a table (column) |
| <thead> | Groups the header content in a table |
| <tbody> | Groups the body content in a table |
| <tfoot> | Groups the footer content in a table |
| <col> | Specifies column properties for each column within a <colgroup> element |
| <colgroup> | Specifies a group of one or more columns in a table for formatting |
Cells may span several rows or columns. The number of rows or columns spanned by a cell is set by the rowspan and colspan attributes for the <th> and <td> elements.
In this table definition, we specify that the cell in row four, column two should span a total of three columns, including the current column.
<table border="1" cellpaddding="5" cellspacing="5">
<caption>Heading of table</caption>
<tr><th>Name</th><th>Cups</th><th>Type of Coffee</th><th>Sugar</th></tr>
<tr><td>T. Grummer</td><td>10</td><td>Espresso</td><td>No</td></tr>
<tr><td>J. Ben</td><td></td><td>Decaf</td><td>Yes</td></tr>
<tr><td>A. Loyda</td><td colspan="3"><em>Not available</em></td></tr>
</table>
The next example illustrates (with the help of table borders) how cell definitions that span more than one row or column affect the definition of later cells. Consider the following table definition:
<TABLE border="1">
<TR><TD>1 <TD rowspan="2">2 <TD>3
<TR><TD>4 <TD>6
<TR><TD>7 <TD>8 <TD>9
</TABLE>
As cell “2” spans the first and second rows, the definition of the second row will take it into account. Thus, the second TD in row two actually defines the row’s third cell.
Output:
Note that if the TD defining cell “6” had been omitted, an extra empty cell would have been added by the user agent to complete the row.
Similarly, in the following table definition:
<TABLE border="1">
<TR><TD>1 <TD>2 <TD>3
<TR><TD colspan="2">4 <TD>6
<TR><TD>7 <TD>8 <TD>9
</TABLE>
<html>
<body>
<table border="1" cellpaddding="5" cellspacing="5">
<CAPTION>Heading of table</CAPTION>
<tr><th>Name</th><th>Cups</th><th>Type of Coffee</th><th>Sugar</th></tr>
<tr><td>T. Grummer</td><td>10</td><td>Espresso</td><td>No</td></tr>
<tr><td>J. Ben</td><td></td><td>Decaf</td><td>Yes</td></tr>
<tr><td>A. Loyda</td><td colspan="3"><em>Not available</em></td></tr>
</table> <br><br>
<table border="1" cellpaddding="5" cellspacing="5">
<tr><td>1</td></td> <td rowspan="2">2</td> <td>3</td></tr>
<tr><td>4</td><td>6</td></tr>
<tr><td>7 </td><td>8</td> <td>9</td></tr>
</table>
<br><br>
<table border="1" cellpaddding="5" cellspacing="5">
<tr><td>1 <td>2 <td>3
<tr><td colspan="2">4 <td>6
<tr><td>7 <td>8 <td>9
</table>
</body>
</html>
Output:
Feel free to read and comment below.
Below is my created application and is useful for people having Google Opinion Rewards.
https://play.google.com/store/apps/details?id=com.manasvi.sawant.rewardtocash
If you wanted to create a website, please visit my fiverr gig link below.
Copyright ©TechOceanhub All Rights Reserved.