Kumail.pk is a Free Platform of

Create Table

A table is an arrangement of data in rows and columns, or possibly in a more complex structure. Tables are widely used in communication, research, and data analysis. Tables appear in print media, handwritten notes, computer software, architectural ornamentation, traffic signs, and many other places.

Create Table

Define an HTML Table

The <table> tag defines an HTML table.

Each table row is defined with a <tr> tag. Each table header is defined with a <th> tag. Each table data/cell is defined with a <td> tag.

By default, the text in <th> elements are bold and centered.

By default, the text in <td> elements are regular and left-aligned.

Example

A simple HTML table:

<table style=”width:100%”>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <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 »

Note: The <td> elements are the data containers of the table.
They can contain all sorts of HTML elements; text, images, lists, other tables, etc.

HTML Table – Add a Border

To add a border to a table, use the CSS border property:

Example

table, th, td {
border: 1px solid black;
}

Try it Yourself »

Remember to define borders for both the table and the table cells.

HTML Table – Collapsed Borders

To let the borders collapse into one border, add the CSS border-collapse property:

Example

table, th, td {
border: 1px solid black;
border-collapse: collapse;
}

Try it Yourself »

HTML Table – Add Cell Padding

Cell padding specifies the space between the cell content and its borders.

If you do not specify a padding, the table cells will be displayed without padding.

To set the padding, use the CSS padding property:

Example

th, td {
padding: 15px;
}

Try it Yourself »

HTML Table – Left-align Headings

By default, table headings are bold and centered.

To left-align the table headings, use the CSS text-align property:

Example

th {
text-align: left;
}

Try it Yourself »

HTML Table – Add Border Spacing

Border spacing specifies the space between the cells.

To set the border spacing for a table, use the CSS border-spacing property:

Example

table {
border-spacing: 5px;
}

Try it Yourself »

Note: If the table has collapsed borders, border-spacing has no effect.

HTML Table – Cell that Spans Many Columns

To make a cell span more than one column, use the colspan attribute:

Example

<table style=”width:100%”>
  <tr>
    <th>Name</th>
    <th colspan=”2″>Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>

Try it Yourself »

HTML Table – Cell that Spans Many Rows

To make a cell span more than one row, use the rowspan attribute:

Example

<table style=”width:100%”>
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan=”2″>Telephone:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>

Try it Yourself »

HTML Table – Add a Caption

To add a caption to a table, use 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 »

Note: The <caption> tag must be inserted immediately after the <table> tag.

A Special Style for One Table

To define a special style for one particular table, add an id attribute to the table:

Example

<table id=”t01″>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Now you can define a special style for this table:

#t01 {
width: 100%;
background-color: #f1f1c1;
}

Try it Yourself »

And add more styles:

#t01 tr:nth-child(even) {
  background-color: #eee;
}
#t01 tr:nth-child(odd) {
  background-color: #fff;
}
#t01 th {
  color: white;
  background-color: black;
}

Try it Yourself »

Chapter Summary

Use the HTML <table> element to define a table
Use the HTML <tr> element to define a table row
Use the HTML <td> element to define a table data
Use the HTML <th> element to define a table heading
Use the HTML <caption> element to define a table caption
Use the CSS border property to define a border
Use the CSS border-collapse property to collapse cell borders
Use the CSS padding property to add padding to cells
Use the CSS text-align property to align cell text
Use the CSS border-spacing property to set the spacing between cells
Use the colspan attribute to make a cell span many columns
Use the rowspan attribute to make a cell span many rows
Use the id attribute to uniquely define one table

Create Table

About Us

Kumail.pk is a Free Platform of Education initiated by Syed Kumail Hassan Shah (Director GIT Education)

Create Table

Kumail.pk is a Free Platform of

Create Table

Define an HTML Table

Example

HTML Table – Add a Border

Example

HTML Table – Collapsed Borders

Example

HTML Table – Add Cell Padding

Example

HTML Table – Left-align Headings

Example

HTML Table – Add Border Spacing

Example

HTML Table – Cell that Spans Many Columns

Example

HTML Table – Cell that Spans Many Rows

Example

HTML Table – Add a Caption

Example

A Special Style for One Table

Example

Now you can define a special style for this table:

And add more styles:

Chapter Summary

About Us

Pages

Help

Social Media