Home / Articles / Programming languages / Markup languages / HTML & CSS / Creating tables in HTML

Creating tables in HTML

Creating tables in HTML
 
Creating tables in HTML
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


A table consists of rows and columns that contain text or graphics. Usually tables are used to organize and present the information, but there is more to it. With the help of tables the layout of pages becomes more user-friendly. This is achieved by careful positioning of textual fragments and images.

To add a table to a web page use tag-container table. A table must have at least one row and one column (example 1).

Example 1. Creating a table.

<table>
  <tr>
    <td>Table content</td>
  </tr>
</table>

To add a line use the tag tr. To split a row into columns apply tags td and th (example 2). There is no much of a difference between these tags. th tag is designed to create headers, the text in this cell is indicated in bold and centered (example 2). In other aspects, the tags are identical.

Example 2. Table cells.

<table>
  <tr>
    <th>Cell 1</th>
    <td>Cell 2</td>
  </tr>
  <tr>
    <th>Cell 3</th>
    <td>Cell 4</td>
  </tr>
</table>

Below is shown the position of the table cells.

Cell 1 Cell 2
Cell 3 Cell 4

Table features

Each table parameter has its own value set by default. This means that if a particular attribute is missing, it is still there, and with a certain value. That is why the table may appear quite different than intended. To understand what to expect, you should be aware of the table's explicit and implicit characteristics that are listed below.

  • One table may be placed inside a cell of another table. This may be required to represent complex data, or if one table acts as a modular grid, and the other inside it, as a regular table.
  • By default the table has no specific size. The size is defined based upon the contents of the cells. For example, the width is determined automatically based on the total width of the cell's contents including the width of the border between the cells. The padding around the content, is set via the parameter cellpadding and the cell spacing is set by cellspacing.
  • Depending on table's width being set in percents or pixels, the contents of the table adjusts to the specified size. Thus, the browser automatically adds line breaks in the text so that it fits into the cell. This way the table width remains unchanged. Some times the width of the cell's content can not be changed, for example, when you add images to the cell. In this case the width of the table increases, in spite of indicated dimensions.
  • The border of the cell, if you add the parameter border to the tag table, by default is shown as three-dimensional. Adding the bordercolor parameter makes the border one-colored, this eliminates the 3D effect.
  • Until the table is fully loaded, its contents will not be displayed. This is because the browser, before it displays the content of the table, is calculating the size of the cells, its width and height. The browser needs to know the content before it starts the calculations. So it waits until everything that is in the cells loads, and only then the table is displayed.

 

Read also

Table parameters in HTML

Table parameters in HTML

Table alignment in HTML

Table alignment in HTML

Tables and borders in HTML

Tables and borders in HTML

Cell parameters in HTML

Cell parameters in HTML

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation