CodeGym /Courses /Frontend SELF EN /Table Styling

Table Styling

Frontend SELF EN

Level 5 , Lesson 4

Available

9.1 Using Attributes

Styling tables in HTML can be done in different ways. One of them is using attributes directly in the table tag and its elements. Even though modern web developers usually prefer using CSS for styling, understanding HTML attributes is useful for basic styling.

Main Table Attributes

The border Attribute

Sets the thickness of the table border. Usually, the value is given in pixels.

HTML

    
      <table border="1">
        <tr>
          <th>Name</th>
          <th>Score</th>
        </tr>
        <tr>
          <td>Ivan</td>
          <td>91</td>
        </tr>
        <tr>
          <td>Maria </td>
          <td>94</td>
        </tr>
        <tr>
          <td>Nina</td>
          <td>89</td>
        </tr>
      </table>

The cellpadding Attribute:

Defines the padding inside the cells (padding within cells from their borders).

HTML

    
      <table cellpadding="10">
        <tr>
          <th>Name</th>
          <th>Score</th>
        </tr>
        <tr>
          <td>Ivan</td>
          <td>91</td>
        </tr>
        <tr>
          <td>Maria</td>
          <td>94</td>
        </tr>
        <tr>
          <td>Nina</td>
          <td>89</td>
        </tr>
      </table>

The cellspacing Attribute:

Defines the space between cells.

HTML

    
      <table cellspacing="5">
        <tr>
          <th>Name</th>
          <th>Score</th>
        </tr>
        <tr>
          <td>Ivan</td>
          <td>91</td>
        </tr>
        <tr>
          <td>Maria</td>
          <td>94</td>
        </tr>
        <tr>
          <td>Nina</td>
          <td>89</td>
        </tr>
      </table>

The width and height Attributes:

Set the width and height of the table. These attributes can also be used in <td> and <th> tags to set cell sizes.

HTML

    
      <table style="text-align: left;" width="100%" height="200">
        <tr>
          <th width="50%">Name</th>
          <th width="25%">Project</th>
          <th width="25%">City</th>
        </tr>
        <tr>
          <td>Alice</td>
          <td>25</td>
          <td>Paris</td>
        </tr>
      </table>

The align Attribute:

Defines the table alignment on the page (left, right, center).

HTML

    
      <table align="center">
        <tr>
          <th>Name</th>
          <th>Score</th>
        </tr>
        <tr>
          <td>Ivan</td>
          <td>91</td>
        </tr>
        <tr>
          <td>Maria</td>
          <td>94</td>
        </tr>
        <tr>
          <td>Nina</td>
          <td>89</td>
        </tr>
      </table>

The bgcolor Attribute:

Sets the background color for the table or cells.

HTML

    
      <table bgcolor="#f0f0f0">
        <tr>
          <th>Name</th>
          <th>Score</th>
        </tr>
        <tr>
          <td>Ivan</td>
          <td>91</td>
        </tr>
        <tr>
          <td>Maria</td>
          <td>94</td>
        </tr>
        <tr>
          <td>Nina</td>
          <td>89</td>
        </tr>
      </table>

9.2 Attributes for Table Cells

Attributes for Table Cells

The colspan Attribute:

Merges cells horizontally.

HTML

    
      <td colspan="2">Merged Cell</td>

The rowspan Attribute:

Merges cells vertically.

HTML

    
      <td rowspan="2">Merged Cell</td>

The align Attribute:

Defines the horizontal alignment of the cell contents (left, right, center).

HTML

    
      <td align="center">Centered Text</td>

The valign Attribute:

Defines the vertical alignment of the cell contents (top, middle, bottom).

HTML

    
      <td valign="top">Text at the Top</td>

The bgcolor Attribute:

Sets the background color for a cell.

HTML

    
      <td bgcolor="#ffcc00">Colorful Background</td>

9.3 Complete Example

A complete example of table styling with attributes:

HTML

    
      <table border="1" cellpadding="10" cellspacing="5" width="80%" align="center" bgcolor="#e0e0e0">
        <caption>List of Students and Their Scores</caption>
        <thead bgcolor="#c0c0c0">
          <tr>
            <th align="left">Name</th>
            <th align="center">Age</th>
            <th align="right">City</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Ivan</td>
            <td align="center">30</td>
            <td align="right">London</td>
          </tr>
          <tr>
            <td colspan="2" align="center">Maria and Peter</td>
            <td align="right">Liverpool</td>
          </tr>
          <tr>
            <td rowspan="2" valign="middle">Anna</td>
            <td>25</td>
            <td>Manchester</td>
          </tr>
          <tr>
            <td>27</td>
            <td>Leeds</td>
          </tr>
        </tbody>
        <tfoot>
          <td colspan="3" align="center">End of Table</td>
        </tfoot>
      </table>

Explanation of the Example

border="1": sets the table border width to 1 pixel
cellpadding="10": sets the padding inside all table cells to 10 pixels
cellspacing="5": sets the spacing between table cells to 5 pixels
width="80%": sets the table width to 80% of the parent element's width
align="center": centers the table on the page
bgcolor="#e0e0e0": sets the background color for the table
<caption>: adds a title to the table
<thead> and <tbody>: group headers and the body of the table. The background color for the headers is set using bgcolor="#c0c0c0"
<th> and <td>: are used to define header and data cells
<align> and <valign>: specify horizontal and vertical alignment of cell contents
<colspan> and <rowspan>: merge cells horizontally and vertically

Previous Previous lesson

Next Next lesson

Comments (3)

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION

Mirko Mirxas Level 48

28 November 2025

When I do these exercises in my IDE, it gives `deprecated` warnings all the time. For example, when giving styles directly to the table, like in these exercises. Does that mean the course isn't teaching the new standards/ways, instead of sticking to the old/deprecated practices in web development?

Godfrey Ouma Level 28, Nairobi, Kenya Expert

1 February 2026

Re-read this statement, "Styling tables in HTML can be done in different ways. One of them is using attributes directly in the table tag and its elements. Even though modern web developers usually prefer using CSS for styling, understanding HTML attributes is useful for basic styling."

Mirko Mirxas Level 48

8 February 2026

In that case, shouldn't the course include the new standards for the challenges instead of just stating them in a sentence while still using deprecated techniques in the code examples? One can easily forget a sentence but remember the challenge they have done.