Table

CREATING TABLES WİTH HTML

Using tables, we can adjust the placement, alignment and page structure of the objects on our page as we want. For example, we can divide the page into 3 columns and prepare our content accordingly.

To create a table we need 3 tags:

1. <table>……………………….</table> Table tags define where the table starts and ends.
2. <tr>………………………………..</tr> tr tags indicate where each line starts and ends.
3. <td>………………………………</td> Cells are created between td tags.

First the table and then the rows are created. Finally cells in each row are created.

Table Tag Parameters:

1. Border: Determines the border thickness. Its default value is 0 and the border is not visible. The thickness of the border can be adjusted by setting a value of 1 or greater.

Note: The table border consists of two lines, inner and outer. The thickness we give with the border will be applied to both the inner and outer border. The space between these two lines can be increased or decreased with the cellspacing parameter. When we reset the space, the inner and outer lines will stick together, so their total thickness will be 2 times the thickness we specified with the border.

The formation of the border with a single line can be done with the Css border-collapse property.

2. Bordercolor: It  is used to define the border color.

Note: In some browsers (for example, Internet Explorer), the bordercolor parameter determines the outer border of the table if used in the table tag, the inner borders of the cells in that row if used in tr, and only the inner border color of that cell if used in td.

3. Align:

• If used in the table tag, the alignment of the table within the page,
• If used in the td tag, the alignment of the contents of that cell,
• When used inside the tr tag, it aligns the contents of all cells in that row.
• Left to align left - right to align right - center to center

4. Valign: Determines the vertical alignment within the cell. top aligns to the top, middle aligns to the middle, and bottom aligns to the bottom.

Sets the vertical alignment of only that cell if written inside the td tag, and for all cells in that row if written inside tr.

5. Width: If it is  used in the table tag, it determines the total width of the table, if it is used in the td tag, it determines the width of that cell.

Note : When the width of one of the cells in the same column (ie one below the other) is changed, the other cells in that column will be the same width. Therefore, to determine the width of a column, it will be sufficient to use the width parameter in only one of the td tags corresponding to that column.

6. Height:  Determines the height of the row. It can be used inside tr or td tag.

Note: When the height of one of the cells in a row is changed, the other cells in that row will be the same height. Therefore, to determine the height of a row, we only need to use the height parameter in one of the td tags in that row.

7. Bgcolor:

• If used in the table tag, the background color of the entire table,
• If used in the tr tag, the background color of that line,
• If it is used in the td tag, it determines the background color of that cell.

8. Background: If it is  used in the table tag, it determines the background image of the table, if it is used in the tr tag, it determines the background image of that row, if it is used in the td tag, it determines the background image of that cell.

9. Cellspacing: It  is used inside the Table tag. It allows to set the distance between cells in pixels. It allows us to set the spacing between the inner and outer borders, which is also mentioned in the border parameter. Space can be removed by giving 0.

10. Cellpadding: It determines how many pixels away the texts and other elements in the cell will be from the walls of the cell. It is used inside the table tag and is applied to the entire table.

11. Colspan: It is used to combine adjacent cells (columns) on the same row.

12. Rowspan: It is used to combine cells (rows) under each other.

EXERCISES