HTML Tables

LESSON 15
What is a Table in HTML?
A table is a representation of data arranged in rows and columns.
Really, it's more like a spreadsheet. In HTML, with the help of tables,
you can arrange data like images, text, links and so on into rows and
columns of cells.
The use of tables in the web has become more popular recently
because of the amazing HTML table tags that make it easier to create
and design them.
To create a table in HTML you will need to use tags. The most
important one is the <table> tag which is the main container of the
table. It shows where the table will begin and where it ends.
Common HTML Table tags
Other tags include:
tr> - represents rows
<td> - used to create data cells
<th> - used to add table headings
<caption> - used to insert captions
<thead> - adds a separate header to the table
<tbody> - shows the main body of the table
<tfoot> - creates a separate footer for the table
HTML Table Syntax:
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
</table>
How to Add a Table Heading in HTML
The <th> is used to add headings to tables. In
basic designs the table heading will always take
the top row, meaning we will have the <th>
declared in our first table row followed by the
actual data in the table. By default the text
passed in the Heading is centered and Bold.
An example with use of <th>
<table> <tr>
<tr> <td>Lary</td>
<th>First Name</th> <td>Mak</td>
<th>Last Name</th> <td>developer@mail.com</td>
<th>Email Address</th> </tr>
</tr> </table>
<tr>
<td>Hillary</td>
<td>Nyakundi</td>
<td>tables@mail.com</td>
</tr>
How to Add a Caption to a Table
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.

Caption Syntax
<table>
<caption></caption>
<tr> </tr>
</table>
An example with use of <caption>
<table> <tr>
<caption>Free Coding Resources</caption> <td>W3Schools</td>
<tr> <td>Academind</td>
<th>Sites</th> <td>Programming Hero</td>
<th>Youtube Channels</th> </tr>
<th>Mobile Appss</th> <tr>
</tr> <td>Khan Academy</td>
<tr> <td>The Coding Train</td>
<td>Freecode Camp</td> <td>Solo learn</td>
<td>Freecode Camp</td> </tr>
<td>Enki</td> </table>
</tr>
How to Use the Scope Attribute in HTML
Tables
The scope attribute is used to define whether a specific header is intended for either a column,
row, or a group of both. I know the definition might be challenging to understand but hold on –
with the help of an example you will better understand it.

The main purpose of the scope element is to show the target data so that the user does not
have to rely on assumptions. The attribute is declared in the header cell <th>, and it takes the
values col, row, colgroup and rowgroup.

The values col and row indicated that the header cell is providing information for either the rows
or columns respectively.
Scope Syntax
<table>
<tr>
<th scope="value">
</tr>
</table
An Example with use of <scope>
<table> <tr>
<tr> <td>2</td>
<th></th> <td>May - August</td>
<th scope="col">Semester</th> <td>Pass</td>
<th scope="col">Grade</th> </tr>
</tr>
<tr>
<tr> <td>2</td>
<td>1</td> <td>September - December</td>
<td>Jan - April</td> <td>Distinction</td>
<td>Credit</td> </tr>
</tr> </table>
How to Use Cell Spanning in an HTML
Table
HTML table two cell attributes, includes colspan
for horizontal spanning and rowspan for vertical
spanning.
The two attributes are assigned numbers
greater that zero which shows the number of
cells you wish to span.
An Example with use of span
<table> <tr> <tr>
<tr> <td>Operating <td>Operating
<th>Name</th> Syatem</td> Syatem</td>
<th>Subject</th> <td>60</td> <td>75</td>
<th>Marks</th> </tr> </tr>
</tr> <tr> <tr>
<tr> <td rowspan = <td></td>
<td rowspan = "2">Lary</td> <td colspan="3">Total
"2">Hillary</td> <td>Advanced Web</td> Average: 72.5</td>
<td>Advanced Web</td> <td>80</td> </tr>
<td>75</td> </tr> </table>
</tr>
How to Add a Table Header, Body, &
Footer in HTML Tables
In a table they are divided by using attributes
namely:
<thead> - provides a separate header for the table
<tbody> - contains main content of the table
<tfoot> - creates a separate footer for the table
An Example with use of span
<table>
<thead>
<tr> <tr> <tfoot>
<th <td>$200,00</td> <tr>
colspan="2">October</th> <td>$50,00</td> <th colspan=
<th <td>$300,000</td> "4">November was more
colspan="2">November</t <td>$70,000</td> produstive</th>
h> </tr> </tr>
</tr> </tbody> </tfoot>
</thead> </table>
<tbody>
<tr>
<td>Sales</td>
<td>Profit</td>
<td>Sales</td>
<td>Profit</td>
</tr>
https://www.freecodecamp.org/news/html-tables-table-
tutorial-with-css-example-code/