HTML

Introduction to HTML
What is HTML
Structure of an HTML Document
Importance of Doctype
Tags
Elements
Attributes
Example with Tags, Elements, and Attributes
Understanding the head and body Tags in HTML
The Head Tag
The Body Tag
HTML Text Fundamentals
Text Formatting Tags
Paragraphs
Strong Emphasis
Emphasis
Nuances of White Space in HTML
Convention of Using Lowercase for Tags
Working with Lists and Links in HTML
Creating Ordered and Unordered Lists
Ordered Lists
Unordered Lists
Creation of Hyperlinks Using the <a> Tag
Creating Internal Links
Creating External Links
Adding Images and Media in HTML
Embedding Images Using the <img> Tag
Embedding Videos and Audio
Video
Audio
Responsive Media Using HTML5
Working code for embedding images, videos, and audio
HTML Forms and Input Types
Overview
Creating Forms with the <form> Tag
Importance of the <label> Tag for Accessibility
Working code for HTML Forms and Input Types
Tables in HTML
Tables in HTML Overview
Creating and Structuring Tables
Importance of Table Accessibility
Styling Options
Working code for Tables in HTML
Semantic HTML
Semantic HTML Overview
Importance of Semantic HTML
Header Tag
Nav Tag
Article Tag
Section Tag
Footer Tag
Example of a Semantic HTML Layout
Advanced HTML Attributes
Advanced HTML Attributes Overview
The id Attribute
The class Attribute
The style Attribute
Custom data Attributes
Complete working code for Advanced HTML Attributes
HTML Document Head
HTML Document Head Overview
Title Tag
Meta Tags
Link Tag
Script Tag
Working Code Sample
Building a Simple Webpage Using HTML
Project
Project Overview
Key Takeaways
Course Summary

Working code for Tables in HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example of HTML Table</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1>HTML Table Example</h1>
<table>
<caption>Employee Contact Information</caption>
<tr>
<th>Name</th>
<th>Email</th>
<th>Age</th>
</tr>
<tr>
<td>Joy</td>
<td>johndoe@example.com</td>
<td>30</td>
</tr>
<tr>
<td>Jane</td>
<td>janedoe@example.com</td>
<td>25</td>
</tr>
</table>
</body>
</html>

Explanation of the Code
HTML Structure: The <!DOCTYPE html> and <html> tags, with the language attribute set to English, are the conventional beginnings of the document.

Head Section:

Meta Tags: Viewport settings and character sets for responsive design are included.
Title Tag: Defines the webpage's title.
Style Tag: This tag has the very minimum of CSS to style the table. It guarantees that the table makes use of the whole width that is available, borders the cells to clearly demarcate them, and utilizes a background color to set the header apart.

Body Section:

header: A brief header that provides context for the table.

Table Structure:

Caption: Gives the table a title and improves accessibility by placing the shown data in context.
Table Rows (<tr>): Arrange the information in rows.
Header Cells (<th>): These cells are used to specify what data each column represents in the column headers.
Data Cells (<td>): Contains real data.