Questions tagged [html-table]

The <table> element is used to display a grid of data. The <table> is sometimes incorrectly used to position elements on a web page, which should be avoided since tables have semantic meaning. Tables are divided into many sub-elements to make them work.

Like any HTML tag, the <table> tag's behavior can be modified via HTML attributes. The most important attributes for a <table> are the following:

• border defines tables border thickness. ie border="1"
• dir defines the direction of the table. ie dir="rtl" or dir="ltr"
• cellpadding defines space around a cell's content i.e. cellpadding="10"
• cellspacing defines space around cells ie cellspacing="10"

Tables are divided into a number of subelements:

• <caption> is the tile of the table. It's optional but if present it has to be the first tag after the <table> tag.
• <thead>, <tbody>, and <tfoot> will separate the table into their respective sections of header, body, and footer. Using these elements allows better semantic meaning for certain rows of the table, which may be titles to columns (in the header) or a total row (in the footer), rather than pushing everything into the body. If none of these are specified and the table immediately goes into rows, the browser will see it as all being contained within the body.
• <tr> starts a new row in the table. Table rows are not required to be closed by a </tr> but it is recommended to do so in most cases in order to avoid confusion. A table row will continue until a new row is opened or the header, body, or footer which contains it is closed. A table can contain any number of rows.
• <th> defines header cell within a row, This will contains the header information/title, and can be decorated differently in the table.
• <td> defines a Standard cell within a row, which contains some content/data. Like table rows, table cells are also not required to be closed by a </td>. A table cell will continue until a new cell is opened or the row which contains it is closed. A table row can contain any number of cells. Similarly, the <th> element is often used inside the table header. It is an alternative to a regular table cell which sets it aside from other cells as a defining point that identifies the information below or to the side of it.

Also, the cells in a <table> can be merged:

code for rowspan:

<table width="300" border="1">
    <tbody>
        <tr>
            <td rowspan="2">Merged</td>
            <td>Table First Row</td>
        </tr>
        <tr>
            <td>Table Second Row</td>
        </tr>
    </tbody>
</table>

code for colspan:

<table width="300" border="1">
    <tbody>
        <tr>
            <td colspan="2">Merged</td>
        </tr>
        <tr>
            <td>Table First Col</td>
            <td>Table Second Col</td>
        </tr>
    </tbody>
</table>

code for no borders:

<table width="300" cellspacing="0" cellpadding="0">
    <tbody>
        <tr>
            <td colspan="2">Merged</td>
        </tr>
        <tr>
            <td>Table First Col</td>
            <td>Table Second Col</td>
        </tr>
    </tbody>
</table>

This tag is related to html.