CodeGym /Java Course /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

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