HTML: Webpage Layouts (Part 1)

HTML tables are designed to display tabular data, such as financial reports, schedules, or pricing tiers. Because tables have so many moving parts, they have the highest number of specific attributes of any HTML element.

Topic 1: The Core Structure Tags

Every table is built using four fundamental tags:

• <table>: The main wrapper that holds the entire table.
• <tr>: Table Row. This creates a horizontal slice. You must define a row before you can add data.
• <th>: Table Header. Used in the first row. The browser automatically makes this text bold and centered.
• <td>: Table Data. The standard cell that holds your actual information.

The Code: A Structure with no attributes

<table>
  <!-- Row 1: The Headers -->
  <tr>
    <th>Course</th>
    <th>Duration</th>
  </tr>
  <!-- Row 2: The Data -->
  <tr>
    <td>Computer Science</td>
    <td>4 Years</td>
  </tr>
</table>

Output (Notice it is invisible without borders!):

Course	Duration
Computer Science	4 Years

Topic 2: The Border Attributes

By default, tables have no lines. To make the grid visible, we apply the border attribute to the main <table> tag.

• border="1": Draws a 1-pixel border around the table and all individual cells.
• border="5": Makes the outer edge of the table 5 pixels thick, while keeping the inside cell borders 1 pixel thick.
• bordercolor: Changes the color of the border (Accepts names like "red" or Hex codes like "#4C8BF5").

The Code: Custom Borders

<table border="3" bordercolor="blue">
  <tr>
    <th>Module</th>
    <th>Status</th>
  </tr>
  <tr>
    <td>Database</td>
    <td>Active</td>
  </tr>
</table>

Output:

Module	Status
Database	Active

Topic 3: Dimensions (Width and Height)

You can control the size of the entire table, or the size of specific cells, using width and height. These can be defined in exact Pixels (e.g., "400") or relative Percentages (e.g., "100%").

Advanced Rule: If you set the width of a <th> or <td> in the first row, that entire column will copy that width all the way down the table.

The Code: Sizing the Table and Columns

<!-- Table takes up 80% of the screen width, and is exactly 100px tall -->
<table border="1" width="80%" height="100">
  <tr>
    <!-- Forcing the first column to be exactly 200 pixels wide -->
    <th width="200">ID Number</th>
    <!-- This column will take up whatever space is left -->
    <th>Full Name</th>
  </tr>
  <tr>
    <td>EMP-992</td>
    <td>Sarah Connor</td>
  </tr>
</table>

Output:

ID Number	Full Name
EMP-992	Sarah Connor

Topic 4: Alignment (Horizontal and Vertical)

Data rarely looks good pushed into the top-left corner. We control data positioning with two attributes:

• align: Controls Horizontal placement (Left, Center, Right). Can be applied to the <table> itself to move the whole table, or to a <tr>/<td> to move the text inside.
• valign: Controls Vertical placement (Top, Middle, Bottom). Applied to rows or cells.

The Code: Manipulating Alignment

<!-- Centering the entire table on the webpage -->
<table border="1" width="400" height="100" align="center">
  <!-- Centering all text in this row horizontally -->
  <tr align="center">
    <th>Data 1</th>
    <th>Data 2</th>
  </tr>
  <tr>
    <!-- Pushing text to the bottom right of this specific cell -->
    <td align="right" valign="bottom">Bottom Right</td>
    <!-- Pushing text to the top left of this specific cell -->
    <td align="left" valign="top">Top Left</td>
  </tr>
</table>

Output:

Data 1	Data 2
Bottom Right	Top Left

Topic 5: Background Colors (bgcolor)

You can paint your table using the bgcolor attribute. The true power of this attribute is its Hierarchy of Inheritance.

1. If you put bgcolor on the <table>, the whole table changes color.
2. If you put bgcolor on a <tr>, it overrides the table color for that specific row.
3. If you put bgcolor on a <td> or <th>, it overrides the row color for that specific single cell.

The Code: Color Hierarchy

<!-- 1. Paint the whole table light gray -->
<table border="1" width="100%" bgcolor="#f0f0f0">
  <!-- 2. Override the header row to be bright blue -->
  <tr bgcolor="#4C8BF5">
    <th>Name</th>
    <th>Role</th>
  </tr>
  <tr>
    <td>Alice</td>
    <!-- 3. Override just this one cell to be green -->
    <td bgcolor="#2ecc71">Admin</td>
  </tr>
</table>

Output:

Name	Role
Alice	Admin

Part 1 Quiz: Test Your Understanding

Click the buttons below to verify your knowledge before moving to Part 2.

1. What is the difference between <th> and <td>?

A) <th> creates columns, <td> creates rows.

Incorrect. Rows are created by the `<tr>` tag.

B) <th> is used for Header cells (bold and centered by default), <td> is used for standard Data cells.

Correct! The browser automatically applies styling to `<th>` to make it stand out as a title for the column.

C) They do the exact same thing; it is just a naming preference.

Incorrect. They have distinct default behaviors and semantic meanings for screen readers.

2. If you want to change the border color of your table to red, which attribute do you use inside the <table> tag?

A) bgcolor="red"

Incorrect. That changes the background of the table, not the border.

B) color="red"

Incorrect. The `color` attribute traditionally changes text color.

C) bordercolor="red"

Correct! Using `bordercolor` modifies the specific lines drawn by the `border` attribute.

3. Look at this code: `<td align="right" valign="top">`. Where will the text appear inside the cell?

A) The top-right corner.

Correct! `align="right"` pushes it horizontally to the right, and `valign="top"` pushes it vertically to the top.

B) The bottom-right corner.

Incorrect. You would need `valign="bottom"` for that.

C) The exact middle.

Incorrect. You would need `align="center" valign="middle"` for that.

Ready for Part 2?

You now have the basics of table construction down perfectly. In Part 2, we will tackle the advanced attributes: cellpadding, cellspacing, colspan, and rowspan.