Tabels

Tables

are used to create tabular data sets. The table definition must be placed between the two markers that are its delimiters. Within them, row definitions, cell definitions in rows, specific data in cells, table title and row and column headers are placed.

<table> </table>

We introduce table rows using the command:
<tr> </tr>

The table row is its instantiation, and itself creates a framework for cells with data.

Under <table> </table> you can put many more <tr> </ tr> line definitions. Only by defining the cells will the tabular data layout be displayed.

<table>
<tr> </ tr>
<tr> </ tr>
<tr> </ tr>
</table>

We introduce table cells using the command:

<td> </ td>

The cell already contains specific data. You can place text between its markers. Specific cells are placed between the tags of the selected row

<table>
<tr> <td> </td> <td> </td> <td> </td> </tr>
<tr> <td> </td> <td> </td> <td> </td> </tr>
<tr> <td> </td> <td> </td> <td> </td> </tr>
</table>

Table border

For a table to contain a border around it, simply expand the definition with the border attribute. If you do not specify the width of the border, its default value is assumed.

<table border> </table>

or

<table border=”15″> </table>

table
table

 

Distances between cells

To make the distances between cells in pixels different from the default, we can use the cellspacing attribute. This causes the borders between them to become bold.

<table border cellspacing = “7”> </ table>

 

Table width

The width attribute gives us the ability to define the table width yourself.

<table border width = “500”> </ table>

This will display a table with the specified width in pixels.

Instead of values in pixels, we can also use a percentage, e.g. half the width of the parent container in which the table is located.

<table border width = “50%”> </ table>

 

Cell width

The width of the cell is determined by means of styles, and specifically the width of the element.

<td style = “width: 150px;”> cell content </td>

Table alignment

<table style = “float: right;”> </ table>

As a result, the table will be shifted to the right and flipped to the left with text.

The height of the table

<table border style=”height: 180px; width: 60%; “>

 

Vertical alignment of data in cells

The valign attribute is used to vertically align the cell contents – up to the upper edge, to the center and to the bottom edge.

<td valign=”top”> </td>
<td valign=”middle”> </td>
<td valign=”bottom”> </td>

 

 

Table background color

<table style=”background-color: red”>
<tr style=”background-color: beige”>
<td style=”background-color: green”>

 

 

Sample code:

<table border cellspacing=”1″ cellpadding=”5″ style=”border: 14px outset #D26E; “>
    <tr> <td> </td><td> </td><td> </td></tr>
    <tr> <td> </td><td> </td><td> </td></tr>
    <tr> <td> </td><td> </td><td> </td></tr>
</table>

The title of the table

The table should contain a title that explains its content. It should be placed just behind the general table frames. Example:

<table border style=”width: 300px; “>
<caption>title of the table</caption>
    <tr> <td> 1</td><td> 1</td><td> 1</td></tr>
    <tr> <td>2 </td><td>2 </td><td> 2</td></tr>
    <tr> <td> 3</td><td> 3</td><td> 3</td></tr>
</table>

Row header and column

 

Typically, rows and columns headers are placed in the tables to display their contents. By default, headers are shown in bold and in the case of columns positioned in the middle.

<th> </ th>

 

<table border style=”width: 300px; “>
<caption>title of the table</caption>
<tr> <th>2000</th> <th>2001</th><th>2002</th> </tr>
    <tr> <td> 1</td><td> 1</td><td> 1</td></tr>
    <tr> <td>2 </td><td>2 </td><td> 2</td></tr>
    <tr> <td> 3</td><td> 3</td><td> 3</td></tr>
</table>

 

<table border cellpadding=”10″ width=”500″>
<caption>Table title</caption>
<tr><td></td><th>2000</th> <th>2001</th> <th>2002</th> <th>2003</th> <th>2004</th> </tr>
<tr style=”text-align: center; “><th>Element 1</th> <td>115</td><td>124</td><td>138</td><td>147</td><td>204</td></tr>
<tr style=”text-align: center; “><th>Element 2</th> <td>80</td><td>90</td><td>77</td><td>11</td><td>16</td></tr>
</table>

 

Table sections – headline, body and footer

The table can have sections – the header part, the main part and the footer. These elements are useful in determining the appearance of the table and displaying the table.

<table width=”300″ border cellpadding=5>
<thead><tr><td colspan=”2″>Headline</td></tr></thead>
<tfoot><tr><td colspan=”2″>Footer</td></tr></tfoot>
<tbody>
<tr>
<td>Cell 1</td><td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td><td>Cell 4</td>
</tr>
</tbody>
</table>

 

 

Close Menu