Lab Manual 7

Website Development

SCHOOL OF INTERDISCIPLINARY ENGINEERING AND SCIENCES NATIONAL

UNIVERSITY OF SCIENCES AND TECHNOLOGY (NUST
Objectives:

This lab aims to familiarize students with web development languages.

Tables in HTML :

Tables in HTML are a great way to organize information into rows and columns.
Here, we’ll build a basic table for a hypothetical monthly budget.

Steps to Create a Table

1. Start with the <table> tag

The <table> tag holds all other table elements.

2. Add a Table Row (<tr>)

Each row of the table is defined with a <tr> tag.

3. Add Column Headers (<th>)

Inside the first row, we add headers using the <th> tag. Headers are
automatically bold and centered. Here’s an example header row for a budget
table:

<table>

<tr>
<th>Month</th>
<th>Rent</th>
<th>Utilities</th>
<th>Groceries</th>
<th>Eating Out</th>
<th>Entertainment</th>

</tr>

</table>
Add Data Cells (<td>)
For the next row, add data values using the <td> tag. For example, here’s how the
data for the month of August might look:

<table>

<tr>

<th>Month</th>

<th>Rent</th>

<th>Utilities</th>

<th>Groceries</th>

<th>Eating Out</th>

<th>Entertainment</th>

</tr>

<tr>

<td>August</td>

<td>$1500</td>

<td>$150</td>

<td>$350</td>

<td>$100</td>

<td>$50</td>

</tr>

</table>
Let us see how this looks. And here is our table:

Styling the Table:

We can enhance the appearance of the table with a few basic attributes:

1. Border
The border attribute creates a line around the entire table and between each
cell. Adding border="1" to the <table> tag sets this border to a 1-pixel
thickness.

2. Cell Padding
The cellpadding attribute controls the space between the cell content and the
cell border. Adding cellpadding="10" makes the text less cramped by adding
padding inside each cell.

3. Cell Spacing
The cellspacing attribute adjusts the space between cells. Setting
cellspacing="0" removes any space between cells, creating a more seamless
look.

Here's an example:

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

<tr>

<th>Month</th>

<th>Rent</th>

<th>Utilities</th>

<th>Groceries</th>
 <th>Eating Out</th>

<th>Entertainment</th>

</tr>

<tr>

<td>August</td>

<td>$1500</td>

<td>$150</td>

<td>$350</td>

<td>$100</td>

<td>$50</td>

</tr>

</table>

Best Practices for Building HTML Tables

When creating tables in HTML, it’s important to ensure each row has the same
number of columns. If a row has fewer or extra cells than others, the table’s
alignment can become disorganized. For example, if we remove a cell from the
column headers, the content below might not align correctly.

Here's what a misaligned table might look like if the "Groceries" column header is
removed:
<table border="1" cellpadding="10" cellspacing="0">

<tr>

<th>Month</th>

<th>Rent</th>

<th>Utilities</th>

<!-- Groceries removed -->

<th>Eating Out</th>

<th>Entertainment</th>

</tr>

<tr>

<td>August</td>

<td>$1500</td>

<td>$150</td>

<td>$350</td>

<td>$100</td>

<td>$50</td>

</tr>

</table>

With this setup, the columns will no longer align properly. Always double-check that
each row has the same number of cells to keep your table organized and readable.
If you look at the table in the browser, you can see how the headers now have shifted
over one and there is a weird blank space at the end because there isn’t a table cell
there.

Spanning Columns and Rows in HTML Tables

To make a table cell span across multiple columns or rows, we use the colspan and
rowspan attributes. Let’s look at how to apply colspan to keep our table organized
when adding extra data for utilities like "Electricity" and "Water."

In the example, we add an extra cell for "Water" under Utilities, but to maintain
proper alignment, we’ll use colspan="2" on the Utilities header.

Here's how this would look in code:

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

<tr>

<th>Month</th>

<th>Rent</th>

<th colspan="2">Utilities</th> <!-- colspan added -->

<th>Groceries</th>

<th>Eating Out</th>

<th>Entertainment</th>

</tr>

<tr>
 <td>August</td>

<td>$1500</td>

<td>$100</td> <!-- Electricity -->

<td>$50</td> <!-- Water -->

<td>$350</td>

<td>$100</td>

<td>$50</td>

</tr>

</table>

Explanation

• colspan="2" in the header row tells the Utilities cell to span across two
columns, allowing us to insert two separate data cells for "Electricity" and
"Water" below it.

When using colspan or rowspan, it’s essential to ensure that the rest of the cells in
the table are adjusted accordingly to maintain proper alignment.

Colspan Attribute

When we want a header or data cell to stretch across multiple columns in a table, we
can use the colspan attribute. In our case, we want the Utilities header to span across
both Electricity and Water cells.

To do this, we add the colspan attribute to the Utilities cell in the header row and set
it to 2, which will make it cover two columns instead of one:

<th colspan="2">Utilities</th>
Rowspan Attribute

The rowspan attribute lets you extend a cell to cover multiple rows. For instance, if
you have rows for June, July, and August and want them all grouped under the
season "Fall," you can set a cell with "Fall" to span three rows.

To do this:

1. Add a new cell containing "Fall" in the first column of the June row.

2. Set the rowspan attribute of this cell to 3 to cover June, July, and August.

3. To keep the table neat, add a blank cell (<th></th>) in the header row above
"Fall."

Example Table with Rowspan

Here’s how the code looks with the rowspan attribute:

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

<tr>

<th></th>

<th>Month</th>

<th>Rent</th>

<th colspan="2">Utilities</th> <!-- colspan used here -->

<th>Groceries</th>

<th>Eating Out</th>
 <th>Entertainment</th>

</tr>

<tr>

<td rowspan="3">Fall</td> <!-- rowspan spans 3 rows for Fall -->

<td>June</td>

<td>$1500</td>

<td>$100</td>

<td>$50</td>

<td>$350</td>

<td>$100</td>

<td>$50</td>

</tr>

<tr>

<td>July</td>

<td>$1500</td>

<td>$100</td>

<td>$50</td>

<td>$350</td>

<td>$100</td>

<td>$50</td>

</tr>
 <tr>

<td>August</td>

<td>$1500</td>

<td>$100</td>

<td>$50</td>

<td>$350</td>

<td>$100</td>

<td>$50</td>

</tr>

</table>

With this setup, the Fall cell in the first column now neatly spans June, July, and
August, creating a clear, organized table structure.

Tasks
1. Build a Basic Table

Task: Create a table to display a weekly study schedule. Include headers for each
day of the week (Monday through Friday) and fill in two study subjects per day.
Objective: Practice basic table structure (<table>, <tr>, <th>, <td>).

2. Styled Budget Table

Task: Design a monthly budget table with columns for Expense Category, Amount,
and Notes. Add styling attributes like border, cellpadding, and cellspacing.

Objective: Learn to apply inline styling for table aesthetics.

3. Apply Colspan for Grouped Data

Task: Create a table to show daily temperature readings (morning and evening) for
a week. Use colspan to group the "Temperature" heading above two sub-columns:
Morning and Evening.

Objective: Practice grouping data under a single header using colspan.

4. Create a Semester Schedule with Rowspan

Task: Build a table displaying a semester schedule, with subjects and timings for
each month (e.g., September, October, November). Group the three months under
"Fall Semester" using rowspan.

Objective: Practice using rowspan to span multiple rows with a single label.