HyperText Markup Language (HTML)
HTML Tables - Organizing and Structuring Tabular Data
Introduction to HTML Tables
Structuring tabular data is a common task in HTML. HTML can create tables for:
● Course lesson plans
● Timetables
● Work schedules
● Statistics about your favorite cricket team
HTML provides several elements and attributes for structuring data as tables. With a little CSS
for styling, displaying information on tables on the web is easy.
Fundamental Concepts of HTML Tables
In HTML, think of tables as grids that help us to structure and organize information. A table is a
structured set of data made up of rows and columns. HTML tables organize information in rows
and columns, similar to traditional tables.
Basic Table Construction
In HTML, tables are constructed using the table element. The content of every table is
enclosed between the opening and closing tag.
Important: HTML tables follow a row-centric approach.
Table Structure Elements
Table Rows (<tr>)
Within the table element, we define rows using the tr tag, which indicates a table row. If we
want three rows, we must include the tr tag three times.
Table Data (<td>)
The smallest container inside a table is a table cell created by the td element. td stands for
table data. Each td element creates a single cell making up the row together.
Example with three rows and single column:
Within each row, we define the columns required using the td element.
Example with two rows and two columns:
Table Headers (<th>)
We can use the th (table header) if you have headers. This defines the headers for columns,
enhancing accessibility and helping users understand the content better. This works in exactly
the same way as a td, but it has extra styling.
Default Styling: Table headings come with some default styling - they are bold and centered.
Accessibility Benefits: Table headers make tables more accessible by associating each
header with all the data in the same row or column. Screen readers will be able to read out a
whole column or a row of data at once, which is pretty useful.
Complete Table Example with Headers
Here's a complete example showing a table with headers and data cells:
This example demonstrates:
● The first row contains header cells using <th> elements
● The subsequent rows contain data cells using <td> elements
● Each row is defined with <tr> tags
● The table structure follows the row-centric approach
Practical Example: Shopping Bill Table
Consider a shopping bill organized as a table with columns:
● Item
● Description
● Category
● Price per unit
● Quantity
● Total
Since tables in HTML follow a row-centric approach, we define each row separately. The first
row uses th to define the headers for each column.
Spanning Cells Across Multiple Rows and Columns
Sometimes we want cells to span across multiple rows and columns (like in case of category
and total). Table headers and cells have the colspan and rowspan attributes which allow us
to do such things. Both accept a unitless number value, which equals the number of rows or
columns you want to span.
Row Span Example
If we want the "stationery" value to span across three rows:
Important Rule: When you're doing a span of rows, you should not include the respective td in
the consecutive rows. For example, in the second row, skip the stationery cell. If we add a
stationery cell there, it distorts the structure of the table.
Column Span Example
For a "total" value to span across five columns:
Styling Table Columns
If we want to apply a particular style to all cells in a row, we can apply it to the tr element. But
what if we need to style a particular column? It can be tedious or inefficient to specify styling for
each td in a column.
Using <col> and <colgroup>
HTML has a method of defining styling information for an entire column of data all in one place
using the col and colgroup elements.
● col elements are specified inside a colgroup container
● Place just below the opening table tag
● In each col tag, you define the style for that particular column
● The style applies to the entire column
Adding Table Captions
We can add a title or caption to our table using the caption element. This provides users with
additional context and helps them understand the purpose of the table, especially when dealing
with complex data.
Placement: A caption is placed directly beneath the table tag.
Semantic Table Sections
When your table becomes too complex, it's helpful to provide them with greater structural
definition. One effective method is using thead, tfoot, and tbody, which enable you to mark
up a header, footer, and body section of your table.
Table Head (<thead>)
The thead element wraps the part of the table that is the header, usually the first row
containing the column headings.
Table Footer (<tfoot>)
The tfoot element wraps the part of the table that is the footer. This can be a final row with
items in the previous rows summed up.
Table Body (<tbody>)
tbody is always included in every table implicitly if you don't specify it in your code.
Note: Adding these elements doesn't necessarily improve accessibility for screen readers or
enhance visual appearance. However, these elements can be helpful for styling and layout
purposes, serving as useful hooks for adding CSS to your table.
HTML Content Models
Introduction to Content Models
In web development, HTML elements serve as the core of every website. They define the
structure and content of a web page, dictating how it appears and behaves. One crucial aspect
of HTML is the concept of content models, which govern the type of content allowed within each
element. Understanding how these models work is essential for creating well-structured and
semantically rich web pages.
What are HTML Content Models?
Content models define what content an HTML element can hold. Each element defined in the
specification has a content model - a description of the element's expected contents. An HTML
element must have contents that match the requirements described in the element's content
model.
HTML content models also define how elements can be combined and nested in the HTML
document structure. They specify the relationship and hierarchy between elements, guiding how
they can be used within the document. They act as guides for developers, ensuring consistency
and proper structuring within the HTML document.
In simple words: A content model defines the rules that govern the permitted types of content
within an HTML document. These rules ensure the logical flow of information and prevent
invalid combinations of elements, ultimately leading to a more robust and consistent web
experience.
Seven Primary Content Models
HTML has seven primary content models, each representing a specific category of content:
1. Metadata content
2. Flow content
3. Sectioning content
4. Phrasing content
5. Heading content
6. Embedded content
7. Interactive content
1. Metadata Content
This type includes elements that provide information about the document itself. Metadata is not
directly displayed on the page, but it is crucial for search engines and other applications.
Examples of metadata content elements:
● title
● meta
● script
● link
2. Flow Content
This category is the most comprehensive, containing elements that can participate in the flow of
the document. This category encompasses the main building blocks of the page content
including text, paragraphs, headings, lists, images, and tables. Flow content elements can be
nested with each other to create complex layouts.
Flow content is a broad category, encompassing most elements inside the body element
including:
● Heading elements
● Sectioning elements
● Phrasing elements
● Embedding elements
● Interactive elements
● Form-related elements
3. Sectioning Content
This model includes elements that define sections within a document. These elements provide a
high-level structure and help users navigate the page content.
Examples:
● section
● article
● main
4. Phrasing Content
A subset of flow content, phrasing content refers to the text and the markup within the
document. Sequences of phrasing content make up paragraphs. These elements represent
inline content within a flow.
Key Rule: Phrasing content cannot contain other flow elements directly.
Examples:
● span
● strong
● em (emphasis)
5. Heading Content
Comprises elements used for headings and subheadings, which structure the document flow
and organize information by importance.
Examples:
● h1 through h6 tags
6. Embedded Content
Contains elements which embed external resources within the document. This category
includes non-HTML content embedded within the page. These elements provide multimedia
experiences and enhance the page's interactivity.
Examples:
● Images
● Videos
● Audio
● Scripts
● iframe
● object
7. Interactive Content
This category includes elements that handle user interaction. This type of content is used for
user interaction. Interactive elements enable users to engage with the page and provide
dynamic feedback.
Examples:
● form
● input
● button
Practical Examples of Content Model Usage
● An image element can contain only embedded content, like an image source
● A paragraph element can contain flow content including text, other paragraph
elements, and inline elements like strong and em (emphasis)
● An h1 element must only contain phrasing content such as the heading text itself
● A form element can contain interactive content like input and button elements, as
well as sectioning and phrasing content for labels and instructions
Benefits of Understanding Content Models
1. Enhanced Accessibility
Proper use of content models enhances the accessibility of your website. This ensures users
with disabilities can navigate and understand the content easily, regardless of the assistive
technologies.
2. Valid and Error-Free Code
Content models guide development, ensuring that your HTML code is valid and free from errors.
This helps prevent potential issues and inconsistency in rendering your page across different
browsers.
3. Cleaner and More Maintainable Code
Utilizing content models promotes cleaner and more maintainable code. Consistent patterns
and structure make it easier to understand, modify, and reuse the code across different parts of
your website.
4. Improved Structure and Semantics
Adhering to the content model creates a more structured and semantically rich HTML
document. This allows the browser and assistive technologies to understand your page's
content, leading to improved accessibility and SEO performance.
HTML Graphics
Introduction to Digital Image Types
There are two main digital image file types:
1. Raster images
2. Vector images
Raster Images
Raster images are defined using a grid of pixels. A raster image file contains information
showing exactly where each pixel is to be placed and exactly what color it should be.
Popular raster file types:
● JPEG
● PNG
● GIF
Limitation: Because the pixel number is fixed, raster images can become distorted or blurry
when resized to fill a bigger or smaller space.
Vector Images
Vector images are defined using algorithms. A vector image file contains shape and path
definitions that the computer can use to determine what the image should look like when
rendered on the screen. Vector images are made up of mathematical formulas that can scale up
or down infinitely.
Key Advantage: Compared to pixels, vectors don't lose resolution when resized. That's why
vector images are more commonly used for illustrations and logos.
Scalable Vector Graphics (SVG)
SVG is an XML-based vector image format for describing two-dimensional graphics. Unlike
raster graphics (JPEG or PNG), which use a grid of pixels and may lose quality when resized,
SVG images are scalable without losing clarity. SVG is widely used for creating graphics and
interactive elements on the web.
SVG Advantages
1. Scalability: SVG images can be scaled to any size without losing quality, making
them ideal for responsive web design
2. Resolution Independence: SVG is resolution independent, making it look sharp on
all devices and screen resolutions. This makes it suitable for creating logos, icons, or
any graphic that needs to maintain clarity across various displays
3. Text-Based Format: SVG files are nothing but plain text XML files, making them
easy to create, edit, and manipulate with a text editor or graphic software
Basic SVG Example
Here is a simple example of an SVG graphic representing a red circle:
Element Breakdown:
● The svg element defines the SVG container with width and height of 100 units each
● The circle element creates a circle with:
○ Center coordinates (cx, cy): 50, 50
○ Radius: 40 units
○ stroke attribute: sets the color of the circle's border to black
○ stroke-width attribute: defines the width of the border
○ fill attribute: sets the fill color of the circle to red
When rendered in browser, this SVG code will display a red circle with a black border.
SVG Predefined Shape Elements
SVG has some predefined shape elements that developers can use:
● Rectangle
● Circle
● Ellipse
● Line
● Polygon
● Path
Practical Example: Captain America Shield
In a demo, SVG is used to create a Captain America shield using circles and paths:
1. First, the SVG container is created with width
2. Inside the container, four circles are defined with respective colors: red, white,
red, and dark blue
3. The path element is used to create the star
Common SVG Use Case
SVG is commonly used to create logos for web pages.
Conclusion
Key Takeaways
HTML Tables
● HTML tables follow a row-centric approach
● Tables are essential for organizing and structuring tabular data
● Proper use of semantic elements (thead, tbody, tfoot) improves structure
● Experiment with tables to create organized and visually appealing content on the
web
HTML Content Models
● Content models play a significant role in web development
● Understanding content models is essential for creating well-structured and
semantically rich web pages
● By adhering to these guidelines, developers create websites that are accessible
and user-friendly
● This contributes to a positive user experience and promotes the overall quality
and sustainability of the web
Scalable Vector Graphics (SVG)
● SVG remains a versatile and powerful tool for web designers and developers
● As the web continues to evolve, SVG provides scalability and resolution
independence
● SVG allows for complex graphics and interactivity beyond basic examples
● Ideal for responsive web design, logos, icons, and graphics that need to maintain
clarity across various displays