HTML Tables




Defining an HTML Table


An HTML table is defined with the <table> tag.

Each table row is defined with the <tr> tag. A table header is defined with the <th> tag.

By default, table headings are bold and centered. A table data/cell is defined with the <td> tag.

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jhon </td>
    <td>Simith</td> 
    <td>23</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>40</td>
  </tr>
</table>


HTML Table - Adding a Border


If you do not specify a border for the table, it will be displayed without borders.
A border is set using the CSS border property:

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



HTML Table - Adding 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:

th, td {
    padding: 15px;
}


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:

th {
    text-align: left;
}

HTML Table - Cells that Span Many Columns

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


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

HTML Table - Cells that Span Many Rows

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


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





Related Posts