Lesson 10: Table Attributes

Master HTML table attributes to enhance the structure and appearance of your tables

Start Learning
Previous Lesson Next Lesson

HTML Table Attributes Overview

HTML table attributes provide powerful ways to control the appearance and behavior of your tables. While CSS is now preferred for styling, understanding these attributes is still essential for working with legacy code and specific use cases.

Key Insight: While attributes like bgcolor and border are still supported, modern web development favors CSS for styling tables. However, structural attributes like colspan and rowspan remain essential.

Essential Table Attributes

These attributes control the fundamental appearance of your tables:

Attribute Description Values
border Defines table border thickness 0 (no border) or pixel value (e.g., 1, 5)
bgcolor Sets background color for table/cells Color name or hex value (e.g., #FF0000)
bordercolor Sets border color Color name or hex value
width Sets table width Pixels or percentage (e.g., 80%, 500px)
height Sets table height Pixels or percentage

Border and Spacing Attributes

Control the visual presentation of your table with these attributes:

Border and Spacing Demo

<table border="3" bordercolor="#2196F3" cellspacing="10" cellpadding="5">
  <tr>
    <th bgcolor="#FFC107">Product</th>
    <th bgcolor="#FFC107">Price</th>
  </tr>
  <tr>
    <td bgcolor="#E3F2FD">Laptop</td>
    <td bgcolor="#E3F2FD">$899</td>
  </tr>
  <tr>
    <td bgcolor="#E3F2FD">Smartphone</td>
    <td bgcolor="#E3F2FD">$699</td>
  </tr>
</table>

Result:

Product Price
Laptop $899
Smartphone $699
Attribute Effect
border="3" Creates a 3px border around the table
bordercolor="#2196F3" Sets the border color to blue
cellspacing="10" Creates 10px space between cells
cellpadding="5" Creates 5px space inside cells around content
bgcolor="#FFC107" Sets background color for header cells

Spanning Rows and Columns

Use rowspan and colspan to create cells that span multiple rows or columns.

Spanning Example

<table border="1" cellpadding="8">
  <tr>
    <th rowspan="2" bgcolor="#4CAF50">Name</th>
    <th colspan="2" bgcolor="#4CAF50">Contact Info</th>
  </tr>
  <tr>
    <th bgcolor="#81C784">Email</th>
    <th bgcolor="#81C784">Phone</th>
  </tr>
  <tr>
    <td>Alex Morgan</td>
    <td>[email protected]</td>
    <td>(555) 123-4567</td>
  </tr>
  <tr>
    <td>Sam Wilson</td>
    <td>[email protected]</td>
    <td>(555) 987-6543</td>
  </tr>
</table>

Result:

Name Contact Info
Email Phone
Alex Morgan [email protected] (555) 123-4567
Sam Wilson [email protected] (555) 987-6543
Important: When using rowspan or colspan, remember to remove the corresponding <td> elements in subsequent rows/columns to maintain proper table structure.

Text Alignment Attributes

Control text positioning within table cells using align and valign attributes.

Text Alignment Demo

<table border="1" cellpadding="10" width="100%">
  <tr>
    <th align="left">Left Aligned</th>
    <th align="center">Center Aligned</th>
    <th align="right">Right Aligned</th>
  </tr>
  <tr height="80">
    <td valign="top">Top</td>
    <td valign="middle">Middle</td>
    <td valign="bottom">Bottom</td>
  </tr>
</table>

Result:

Left Aligned Center Aligned Right Aligned
Top Middle Bottom
Attribute Values Effect
align left, center, right Horizontal text alignment
valign top, middle, bottom Vertical text alignment
height pixels or percentage Sets row height for vertical alignment demo

Column Grouping

The colgroup and col elements allow you to apply styles to entire columns.

Column Grouping Example

<table border="1" width="100%">
  <colgroup>
    <col span="1" bgcolor="#FFCCBC">
    <col span="2" bgcolor="#C8E6C9">
  </colgroup>
  <tr>
    <th>Product</th>
    <th>Q1 Sales</th>
    <th>Q2 Sales</th>
  </tr>
  <tr>
    <td>Widget A</td>
    <td>$12,000</td>
    <td>$15,000</td>
  </tr>
  <tr>
    <td>Widget B</td>
    <td>$8,500</td>
    <td>$9,200</td>
  </tr>
</table>

Result:

Product Q1 Sales Q2 Sales
Widget A $12,000 $15,000
Widget B $8,500 $9,200
Note: Column grouping is particularly useful for applying consistent styling to multiple columns without repeating attributes in every cell.

Practical Exercise: Employee Schedule

Create an employee schedule table using HTML table attributes with the following specifications:

Your Task:

  1. Create a table with columns: Employee, Monday, Tuesday, Wednesday, Thursday, Friday
  2. Use a 2px border with blue color
  3. Add 10px cellpadding and 5px cellspacing
  4. Header row should have light blue background
  5. Use rowspan for employee names to span 2 rows each
  6. Use colspan for "Weekend" to span Saturday and Sunday columns
  7. Align all text to the center

Tips:

  • Use <table border="2" bordercolor="blue">
  • Set cellpadding="10" and cellspacing="5"
  • Apply bgcolor="#E3F2FD" to header cells
  • Use rowspan="2" for employee names
  • Create a "Weekend" header with colspan="2"
  • Add align="center" to all cells
Previous Lesson Next Lesson