HTML table add border and title

Table border

The <table> tag can have an optional border attribute that controls the table's borders. By default, browsers do not display a border around the table and cells, but the presence of the border attribute indicates to the browser that the table must have a border.

According to the HTML 5 standard, the value of the border attribute can be either 1 or an empty string (denoted as a pair of double quotation marks ""). It does not matter what attribute value you specify, if it is present, then the border will be displayed:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
  </head>
  <body>

    <h4>Table with border:</h4>
    <table border="1">
      <tr><td>First</td><td>row</td></tr>
      <tr><td>Second</td><td>row</td></tr>
    </table>
	
    <h4>Table without border:</h4>
    <table>
      <tr><td>First</td><td>row</td></tr>
      <tr><td>Second</td><td>row</td></tr>
    </table>

  </body>
</html>
Try it »

If you don't like the default table view of a border, i.e. a double border, you can use the style attribute by setting the CSS property border-collapse with the value collapse, this will give the border a standard view:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
  </head>
  <body>

    <table border="1" style="border-collapse: collapse;">
      <tr><td>cell 1</td><td>cell 2</td></tr>
      <tr><td>cell 3</td><td>cell 4</td></tr>
    </table>

  </body>
</html>
Try it »

Table title

Each table usually has a title describing its contents. To create a table header, use the <caption> tag, usually it is placed immediately after the opening <table> tag, but it can also be placed almost anywhere within the table between <tr> elements.

A <caption> tag can contain any elements that can be used in the body of an HTML document. By default, the contents of the <caption> tag are displayed above the table and aligned to its center:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
  </head>
  <body>

    <table border="1">
      <caption>My first table</caption>
      <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>

  </body>
</html>
Try it »

The title location can be changed by applying the caption-side CSS property to it. The caption-side property can take only two values: top and bottom. Top is the default value, it indicates that the title is located above the table. The bottom value allows you to place the title below the table.

Copying materials from this site is possible only with the permission of the site administration and
when you specify a direct active link to the source.
2011-2018 © puzzleweb.ru

puzinfo@puzzleweb.ru | ruen