Login With Github

HTML Tables

Tables in HTML are defined by the <table> tag.

Each table has several rows (defined by the <tr> tag), and each row is divided into cells (defined by the <td> tag). The letters "td" stand for "table data", which is the content of a data cell. Data cells can contain text, pictures, lists, paragraphs, forms, horizontal lines, tables, and even more.

Here's an example:

<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

HTML table border

You can use the border attribute to set the border of a table,  for example:

<table border="1">
    <tr>
        <td>Row 1, cell 1</td>
        <td>Row 1, cell 2</td>
    </tr>
</table>

You can also set the border of a table through the border attribute of CSS style, for example:

<style>
table {
    border: 1px solid black;
}
</style>
<table>
    <tr>
        <td>Row 1, cell 1</td>
        <td>Row 1, cell 2</td>
    </tr>
</table>

Set the margins of the cell

You can use the cellpadding attribute to set the margins of a cell. However, browsers don't add margins to cells by default,so you need to do so manually, for example:

<table border="1" cellpadding="10">
    <tr>
        <td>Row 1, cell 1</td>
        <td>Row 1, cell 2</td>
    </tr>
</table>

You can also set the margins of a cell using the padding attribute in CSS, for example:

th, td {
    padding: 10px;
}

Set the space between cells

You can use the cellspacing attribute to set the space between cells, for example:

<table border="1" cellspacing="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

You can also use the border-spacing attribute in CSS for the same purpose:

table {
    border-spacing: 5px;
}

Use colspan attribute to span multiple rows

You can set the colspan attribute to span two rows,for example:

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Jams Li</td>
    <td>88451216</td>
    <td>88451215</td>
  </tr>
</table>

If you set colspan="0", it will span to the last row of the table.

Use rowspan attribute to span multiple lines

You can set the rowspan attribute to span two rows:

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Jams Li</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>88451216</td>
  </tr>
  <tr>
    <td>88451215</td>
  </tr>
</table>

If you set rowspan="0", it will span to the last row of the table.

<caption> tag

The <caption> tag defines the title of a table, for example:

<table style="width:100%">
  <caption>Monthly bill</caption>
  <tr>
    <th>Month</th>
    <th>bill</th>
  </tr>
  <tr>
    <td>July</td>
    <td>$85</td>
  </tr>
  <tr>
    <td>August</td>
    <td>$128</td>
  </tr>
</table>

<th> tag

The <th> tag defines the header of a table. And headers in most browsers are displayed as bold centered text:

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

0 Comment

temp