Week 3: HTML Lists, Graphics, and Tables

Creating Lists in HTML (Ordered, Unordered)

In HTML, lists are used to group a set of items in a structured manner. Lists can be ordered
(numbered) or unordered (bulleted), and they are useful for presenting content that has a
logical or sequential relationship.

1. Unordered Lists: An unordered list displays items with bullet points. It is used when the
order of the items doesn’t matter. The <ul> tag is used to define the unordered list, and each
individual item within the list is wrapped in an <li> (list item) tag.

Example:

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

In this case, the list items will be displayed with bullet points by default.

2. Ordered Lists: An ordered list displays items in a numbered sequence. The <ol> tag is
used to define an ordered list, and again, each individual item is wrapped in an <li> tag. This
type of list is used when the order of the items is important.

Example:

<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>

In this case, the list items will be automatically numbered (1, 2, 3).
3. Nested Lists: You can also create nested lists, which are lists within lists. You can nest both
ordered and unordered lists inside one another to create a hierarchical structure.

Example (nested unordered list inside an ordered list):

<ol>
<li>First item
<ul>
<li>Sub-item 1</li>
<li>Sub-item 2</li>
</ul>
</li>
<li>Second item</li>
</ol>

Inserting and Managing Images/Graphics in HTML

Images and graphics are an important part of web content. HTML allows you to insert images
using the <img> tag. The <img> tag is a self-closing tag that does not have a closing
counterpart, and it requires the src attribute to specify the source (URL) of the image.

1. Basic Image Tag: To insert an image, you use the <img> tag with the src attribute, which
points to the image file's location, and the alt attribute, which provides alternative text in case
the image cannot be displayed.

Example:

<img src="image.jpg" alt="Description of the image">

• src: Specifies the location of the image (either a relative path or absolute URL).
• alt: Provides a description of the image, which is important for accessibility (screen
readers for visually impaired users) and for search engines.

2. Image Size and Resizing: You can control the size of the image using the width and height
attributes. These attributes define the image dimensions in pixels.
Example:

<img src="logo.png" alt="Website Logo" width="200" height="100">

You can also use CSS to resize images with more flexibility, such as making them responsive.

3. Image Alignment: You can align images within the page using HTML attributes or CSS.
The align attribute was used in older HTML versions, but it is now better to use CSS for
alignment.

Example (HTML attribute):

<img src="image.jpg" alt="Image description" align="left">

Example (CSS for alignment):

<img src="image.jpg" alt="Image description" style="float: left;">

4. Image as a Link: You can also use images as clickable links by wrapping them inside an
anchor <a> tag.

Example:

<a href="https://www.example.com">
<img src="logo.jpg" alt="Website Logo">
</a>

5. Responsive Images: To make images responsive (adjust according to screen size), you can
set the width to 100% and the height to auto. This ensures that the image scales proportionally
based on the container.

Example (using CSS):

<img src="image.jpg" alt="Responsive Image" style="width: 100%; height: auto;">

Building Tables in HTML

Tables in HTML are created using the <table> tag. A table allows you to organize data into
rows and columns, making it easier to display structured information. HTML tables consist of
several important tags to define the table's structure and content.

1. Basic Table Structure: A basic HTML table is composed of:

• <table>: The container for the entire table.

• <tr>: The table row, used to define a row of data in the table.
• <td>: The table data cell, used to define each individual piece of data in the table.
• <th>: The table header cell, used to define column headings. It is typically bold and
centered by default.

Example of a simple table:

<table border="1">
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>

• <th> defines the headings of each column.

• <td> defines the content of each table cell.

2. Table Attributes:

• border: Specifies the thickness of the table borders.

• cellpadding: Specifies the space between the content of the cell and the cell border.
 • cellspacing: Specifies the space between individual cells.

Example:

<table border="1" cellpadding="10" cellspacing="5">

<tr>
<th>Product</th>
<th>Price</th>
</tr>
<tr>
<td>Apple</td>
<td>$1.00</td>
</tr>
<tr>
<td>Orange</td>
<td>$0.75</td>
</tr>
</table>

3. Using thead, tbody, and tfoot: HTML5 introduced semantic elements for better structure
in tables:

• <thead>: Defines the header section of the table.

• <tbody>: Defines the body section of the table where the actual data resides.
• <tfoot>: Defines the footer section of the table, typically used for summaries or totals.

Example:

<table border="1">
<thead>
<tr>
<th>Item</th>
<th>Price</th>
</tr>
</thead>
 <tbody>
<tr>
<td>Banana</td>
<td>$0.50</td>
</tr>
<tr>
<td>Peach</td>
<td>$0.80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>$1.30</td>
</tr>
</tfoot>
</table>

Using these elements helps organize the table better, making it easier to understand and
maintain.

4. Styling Tables with CSS: You can also use CSS to style tables for a more visually appealing
layout. CSS can be applied to adjust the table’s appearance, including borders, padding, colors,
and fonts.

Example of a styled table:

<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
 text-align: center;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
</style>

<table>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
<tr>
<td>Banana</td>
<td>$0.50</td>
</tr>
<tr>
<td>Peach</td>
<td>$0.80</td>
</tr>
</table>

In this example:

• The border-collapse: collapse; removes space between the borders.

• The background color alternates between rows using the nth-child selector.
• Padding and text alignment ensure the data is properly spaced and aligned.

Conclusion
In Week 3, you learned how to:

• Create and structure ordered and unordered lists in HTML.

• Insert, manage, and style images and graphics using the <img> tag.
• Build tables to display structured data in rows and columns using the <table>, <tr>,
<th>, and <td> tags.

These fundamental elements provide the building blocks for creating more complex and
interactive web pages. As you advance, you’ll continue to build on these elements by
incorporating more advanced techniques such as CSS for styling and JavaScript for
interactivity.