Table in HTML

Table-in-HTML

How to make Table in HTML – To insert a table into your HTML document, use the <table> element. The <tr> tag divides a table into rows which are further divided into data cells using the <td> tag. <tr> is an abbreviation for table row while td stands for table data. Below is an example of html code that displays a table with headers and a few records.

<table border="1">
    <thead>
        <tr>
            <th>No.</th>
            <th>Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>John Carter</td>
            <td>[email protected]</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Peter Parker</td>
            <td>[email protected]</td>
        </tr>
        <tr>
            <td>3</td>
            <td>John Rambo</td>
            <td>[email protected]</td>
        </tr>
    </tbody>
</table>

What is Elements in HTML5?

How to Add a Border in html table?

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

How to Collapsed Borders in html table?

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

How to add Cell Padding in html table?

th, td {
  padding: 15px;
}

How to Left-align Headings in html table?

th {
  text-align: left;
}

How to Add Border Spacing in html table?

table {
  border-spacing: 5px;
}

How to add Cell that Span Many Columns in html table?

<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>

How to add Cell that Span Many Rows in html table?

<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>

How to add Add a Caption in html table?

<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>

Formatting HTML tables?

There are two attributes that you can use to adjust the whitespace in a table for an enhanced appearance. These are namely, cellspacing and cellpadding. Use the cellpadding attribute to adjust the whitespace between the boarder of a cell and its content. Cellspacing adjusts whitespaces between table cells. Below is an example that demonstrates the cellspacing and cellpadding attributes.

Spanning is a feature that is similar to cell merge in excel. It allows you to extend a column or a row over other datacells. Use the colspan and the rowspan attributes to span rows and columns as shown in the example below.

Terry White

Terry White is a professional Drupal & WordPress developer, Web developer, Web designer, Software Engineer, and Blogger. He strives for pixel-perfect design, clean robust code, and a user-friendly interface. If you have a project in mind and like his work, feel free to contact him

View all posts by Terry White →