As well as several elements in HTML there are specific codes for creating and formatting tables. The tables feature is very interesting and widely used in web pages and applications. The tables are made up of rows and columns, and at the intersection of these are the cells.

Writing HTML tables

In HTML, you can enter all the cells that normally part of the body of a document, such as text, links, images, lists, and even other tables.

The marks that comprise the definition of a table are: <TABLE> … </ TABLE>. All other trademarks relating to the table – rows and cells – will only be considered if included among these brands.

The command <CAPTION> … </ CAPTION> – This is an optional element that defines the title of the table, and should be one of the brands that define, but separate the brands that define rows and columns. Without parameters, the title is displayed above the table and centered.

The command <TR> … </ TR> – is the abbreviation of the words Table Row or Table Line. This is the element used in the defining lines of the tables. The tables are set in rows, and these are made up of cells. The number of rows in a table is the number of existing <TR> </ TR>.

In turn, the command <TD> … </ TD> – is the abbreviation of the words Table Data or Data Table. These marks demarcating the cells that make up the lines, and therefore, must be inserted between marks lines.

The default alignment of a cell is left horizontally and vertically centered, and if the number of cells varies from one line to another, rows with fewer cells are completed right with blank cells.

Finally, the command <TH> … </ TH> – is the abbreviation of the words “Table Header”. It is the element that defines the header cells. The header cells have the same characteristics as those data cells defined by <TD>, except for the horizontal alignment pattern which is centralized, and the source of use in bold.

Check out following a practical example of HTML table creation using the elements mentioned above:

<caption> <b> Simple Table </b> </caption> <br>
<td> <br>
<th> Column 1 </th>
<th> Column 2 </th>
<th> Line 1 </th>
<td> cell 1-1 </td>
<td> cell 1-2 </td>
<th> Line 2 </th>
<td> cell 2-1 </td>
<td> cell 2-2 </td>
<th> Line 3 </th>
<td> cell 3-1 </td>
<td> cell 3-2 </td>


You might also like…


Ajax en los formularios de Scriptcase puede usarse para recargar un campo de tipo de select basado e...


Como muchas personas ya saben, Bootstrap es una biblioteca de front-end libre y de código abierto p...


Usted verá en este post tendencias para 2017 en Diseño Web, en el medio digital y en el desarrollo...

Comment this post

Get new posts, resources, offers and more each week.

We will use the information you provide to update you about our Newsletter and Special Offers. You can unsubscribe any time you want by clinck in a link in the footer of any email you receive from us, or by contacting us at Learn more about our Privacy Police.