Lab 3 - Part 1 - Page Layout

1. How exactly can cells be spanned across rows and columns in a table.

Cells can be spanned across rows and columns in a table by using colspan and rowspan atributes in <th> or <td> html tags.

<th colspan="3">Cell Spanning 3 Columns</th>
<td rowspan="2">Cell Spanning 2 Rows</th>

The example above shows the general syntax used for colspan and rowspan.
Below is example html code used to demonstrate various uses of colspan and rowspan in a table.

<style>
  th, td {
    padding: 10px;
    text-align: center;
  }
</style>

<table border="1">
    <tr>
        <th colspan="3">Cell Spanning 3 Columns</th>
    </tr>
    <tr>
        <td>Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
    </tr>
    <tr>
        <td rowspan="2">Cell Spanning 2 Rows</td>
        <td>Column 2</td>
        <td>Column 3</td>
    </tr>
    <tr>
        <td>Column 2</td>
        <td>Column 3</td>
    </tr>
    <tr>
        <td>Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
    </tr>
    <tr>
        <td>Column 1</td>
        <td colspan="2" rowspan="2">Cell Spanning 2 rows<br> and 2 columns</td>
    </tr>
    <tr>
        <td>Column 1</td>
    </tr>
    <tr>
        <td>Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
    </tr>
</table>

Below is the table resulting from implementing the above html code, note the various uses of colspan and rowspan.
Shown below:

• the heading cell spanning three columns
• a cell spanning two rows
• a cell spanning both two columns and two rows

Cell Spanning 3 Columns
Column 1	Column 2	Column 3
Cell Spanning 2 Rows	Column 2	Column 3
	Column 2	Column 3
Column 1	Column 2	Column 3
Column 1	Cell Spanning 2 rows and 2 columns
Column 1
Column 1	Column 2	Column 3

---

2. Coding tables. Outline positive or negative observations, providing examples.

Observations:

Positives

• HTML tables provide a clear, logical way to represent tabular data using one </tr> tag for each row.
• Elements like <table>, <tr>, <th>, and <td> make data relationships explicit and easy to interpret by browsers and assistive technologies.
• Tables can include cell spanning (rowspan, colspan), nested tables, and styled cells for complex layouts.

Negatives

• There can be difficulty when using cell spanning as previous and subsequent rows (</tr> tags) may have different number of entries.
• Tabular data is represented row by row, it can be difficult to get an idea of how the table looks without viewing it in a browser.
• It is easy to make a mistakes which sqewes the data, and can be hard to find mistakes if HTML is not formatted correctly.
• HTML tables use a lot of lines in the HTML file to represent the table. Large tables are unwieldly, nested tables are complex to read as HTML
• Standard HTML tables are rigid. Resizing for small screens (like mobiles) can be difficult without complex CSS or JavaScript

Below: HTML table with no errors

Cell Spanning 3 Columns
Column 1	Column 2	Column 3
Cell Spanning 2 Rows	Column 2	Column 3
	Column 2	Column 3
Column 1	Column 2	Column 3
Column 1	Cell Spanning 2 rows and 2 columns
Column 1
Column 1	Column 2	Column 3

Below: HTML table with simulated errors

I have made two small errors in the table below. In one row I have added an extra cell, it another I have forgotten one. This may be aesy to fix in a small table like this, but, In a larges table it could prove difficult to find and correct the errors. To find the error one would need to count the rows and then count the <tr> blocks in the HTML, easy here, more difficult in larger more complex tables.

Cell Spanning 3 Columns
Column 1	Column 2	Column 3
Cell Spanning 2 Rows	Column 2	Column 3
	Column 2	Column 3	Error
Column 2	Column 3
Column 1	Cell Spanning 2 rows and 2 columns
Column 1
Column 1	Column 2	Column 3