WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

HTML Tables


HTML Table Example

Number First Name Last Name Points
1 Eve Jackson 94
2 John Doe 80
3 Adam Johnson 67
4 Jill Smith 50

Defining HTML Tables

Example

<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
Try it yourself »

Example explained:

Tables are characterized with the <table> tag.

Tables are partitioned into table rows with the <tr> tag.

Table columns are partitioned into table data with the <td> tag.

A table column can likewise be separated into table headings with the <th> tag.


An HTML Table with a Border Attribute

If you don't indicate an outskirt for the table, it will be shown without borders.

A outskirt can be included utilizing the fringe attribute:

Example

<table border="1" style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
Try it Yourself »

To include outskirts, utilize the CSS border property:

Example

table, th, td {
    fringe: 1px strong black;
}
Try it Yourself »

Remember to characterize fringes for both the table and the table cells.


An HTML Table with Collapsed Borders

If you need the fringes to crumple into one outskirt, include CSS fringe collapse:

Example

table, th, td {
    fringe: 1px strong black;
    fringe breakdown: collapse;
}
Try it Yourself »

An HTML Table with Cell Padding

Cell cushioning indicates the space between the cell substance and its borders.

If you don't determine a cushioning, the table cells will be shown without padding.

To set the cushioning, utilize the CSS padding property:

Example

table, th, td {
    outskirt: 1px strong black;
    outskirt breakdown: collapse;
}
th, td {
    cushioning: 15px;
}
Try it Yourself »

HTML Table Headings

Table headings are characterized with the <th> tag.

By default, every real program show table headings as striking and centered:

Example

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
Try it Yourself »

To left-adjust the table headings, utilize the CSS content align property:

Example

th {
    content adjust: left;
}
Try it Yourself »

An HTML Table with Border Spacing

Border dispersing determines the space between the cells.

To set the fringe dividing for a table, utilize the CSS outskirt spacing property:

Example

table {
    fringe separating: 5px;
}
Try it Yourself »

Table Cells that Span Many Columns

To make a cell range more than one section, utilize the colspan attribute:

Example

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>555 77 854</td>
    <td>555 77 855</td>
  </tr>
</table>
Try it Yourself »

Table Cells that Span Many Rows

To make a cell range more than one column, utilize the rowspan attribute:

Example

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>555 77 854</td>
  </tr>
  <tr>
    <td>555 77 855</td>
  </tr>
</table>
Try it Yourself »

An HTML Table With a Caption

To add a subtitle to a table, utilize the <caption> tag:

Example

<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>
Try it Yourself »

A Special Style for One Table

To characterize an extraordinary style for a unique table, include a id attribute to the table:

Example

<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Now you can characterize an extraordinary style for this table:

table#t01 {
    width: 100%;
    foundation shading: #f1f1c1;
}
Try it Yourself »

And include more styles:

table#t01 tr:nth-child(even) {
    foundation shading: #eee;
}
table#t01 tr:nth-child(odd) {
    foundation shading: #fff;
}
table#t01 th {
    shading: white;
    foundation shading: black;
}
Try it Yourself »

Chapter Summary

  • Use the HTML <table> component to characterize a table
  • Use the HTML <tr> component to characterize a table row
  • Use the HTML <td> component to characterize a table data
  • Use the HTML <th> component to characterize a table heading
  • Use the HTML <caption> component to characterize a table caption
  • Use the CSS border property to characterize a border
  • Use the CSS border-collapse property to fall cell borders
  • Use the CSS padding property to add cushioning to cells
  • Use the CSS text-align property to adjust cell text
  • Use the CSS border-spacing property to set the dividing between cells
  • Use the colspan credit to make a cell range numerous columns
  • Use the rowspan ascribe to make a cell range numerous rows
  • Use the id credit to interestingly characterize one table