HTML Tables

Writing a table HTML

<table></table>   – table container
<tr></tr>    – table row
<th></th>    – table column
<td></td>    – table cells

Table code is written by copying.

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

Inserting records into table cells.

<th></th> – default font bold.

<table>
<tr><th>One</th><th>Two</th><th>Three</th><th>Four</th></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1a</td><td>2a</td><td>3a</td><td>4a</td></tr>
<tr><td>1b</td><td>2b</td><td>3b</td><td>4b</td></tr>
<tr><td>1c</td><td>2c</td><td>3c</td><td>4c</td></tr>
</table>

Result

Create a table design.

The following table attributes are used to create the design.

1. width – table width.

2. height – table height.

3. frame – creates borders around the table.

4. align – alignment of the table on the page.

5. bopder – creates a frame of the table and cells.

6. bordercolor – frame color.

7. bgcolor – table background color.

8. background – background image in the table.

9. cellpadding – the distance between the frame and the contents of the cell.

10. cellspacing – cell spacing.

11. rules – overrides the cellspacing attribute.

12. summary – short description of the table

13. cols – indicates the number of columns, which speeds up the loading of the table.

14. colspan – merges cells horizontally.

15. rowspan – merges cells vertically.

Many of the attributes of the tables are outdated, so we will do the design in css.

Styles for tables can be entered both in the style.css file, and directly in the <table> tag, and other table tags.

IThe style file is usually set properties that are acceptable for all tables located on the pages of the site, and the characteristic features of the table are entered in the tag

1. The width and height of the table – can be specified in all sizes available in the web units.

The height of the table is usually not specified, as determined by the number of rows, but in some cases, it is possible to use it.

File style.css

table{
     width: 100%;
     height: 200px;
}

Direct inclusion

<table style="width: 100%; height: 200px;">....</table>

2. Borders and frames of the table.

Frames and borders – the main element of tables. They are created by the css property border

To create borders on the sides of the table, an indication of the side is added border-left, border-right, border-top, border-bottom

File style.css

table{
      border: 2px solid #777;
}

Direct inclusion

<table style="border: 2px solid #777;">
..........
</table>

File style.css

table{
      border-left: 2px solid #777;
}

Direct inclusion

<table style="border-left: 2px solid #777;">
..........
</table>

Now make a border for each cell.

File style.css

table{
      border: 2px solid #777;
}
td, th{
	border:2px solid #777;
}

Direct inclusion

<table style="border: 2px solid #777;">
<tr>
<th style="border:2px solid #777;">One</th>
<th style="border:2px solid #777;">Two</th>
<th style="border:2px solid #777;">Three</th>
<th style="border:2px solid #777;">Four</th>
</tr>
<tr>
<td style="border:2px solid #777;">1</td>
<td style="border:2px solid #777;">2</td>
<td style="border:2px solid #777;">3</td>
<td style="border:2px solid #777;">4</td>
</tr>
<tr>
<td style="border:2px solid #777;">1а</td>
<td style="border:2px solid #777;">2а</td>
<td style="border:2px solid #777;">3а</td>
<td style="border:2px solid #777;">4а</td>
</tr>
<tr>
<td style="border:2px solid #777;">1b</td>
<td style="border:2px solid #777;">2b</td>
<td style="border:2px solid #777;">3b</td>
<td style="border:2px solid #777;">4b</td>
</tr>
<tr>
<td style="border:2px solid #777;">1c</td>
<td style="border:2px solid #777;">2c</td>
<td style="border:2px solid #777;">3c</td>
<td style="border:2px solid #777;">4c</td>
</tr>
</table>

So the browser displays the default table.

To remove indents in the table tag, enter the property border-collapse with the value collapse

File style.css

table{
      border: 2px solid #777;
      border-collapse: collapse;
}

Direct inclusion

<table style="border: 2px solid #777; border-collapse: collapse;">
..........
</table>

3. Background, frame color, font style

Direct inclusion, at first glance looks very cumbersome and difficult to perform.

In fact, it is not. Only the first lines and some styles are written manually, everything else is copied.

With direct inclusion, each row, column, cell can set its own background, font and frame color.

<table style="border:5px solid blue;">
<tr style="background:#FFE4B5;">
<th style="border:2px solid #228B22;">One</th>
<th style="border:2px solid #228B22;">Two</th>
<th style="border:2px solid #228B22;">Three</th>
<th style="border:2px solid #228B22;">Fourре</th>
</tr>
<tr style="background:#FFDAB9;">
<td style="border:2px solid #00FF7F;">1</td>
<td style="border:2px solid #00FF7F;">2</td>
<td style="border:2px solid #00FF7F;">3</td>
<td style="border:2px solid #00FF7F;">4</td>
</tr>
<tr style="background:#EEE8AA;">
<td style="border:2px solid #00FF7F;">1а</td>
<td style="border:2px solid #00FF7F;">2а</td>
<td style="border:2px solid #00FF7F;">3а</td>
<td style="border:2px solid #00FF7F;">4а</td>
</tr>
<tr style="background:#F0E68C;">
<td style="border:2px solid #00FF7F;">1b</td>
<td style="border:2px solid #00FF7F;">2b</td>
<td style="border:2px solid #00FF7F;">3b</td>
<td style="border:2px solid #00FF7F;">4b</td>
</tr>
<tr style="background:#FFFF00;">
<td style="border:2px solid #00FF7F;">1c</td>
<td style="border:2px solid #00FF7F;">2c</td>
<td style="border:2px solid #00FF7F;">3c</td>
<td style="border:2px solid #00FF7F;">4c</td>
</tr>
</table>

And if you remove border-collapse, it will be like this:

4. Alignment and indents.

a) Alignment and indents on the page.

To align the table to the center of the page, use the margin property with the value auto

File style.css

table{
     margin: auto;
}

Direct inclusion

<table style="margin: auto; border:5px solid blue; border-collapse: collapse;">
..........
</table>

To align the table along the edges of the page, the float property is entered in the table tag, which takes the values left or right.

In this case, the table is positioned on the left or right edge of the page, and the text below the table flows around it on the right or left respectively.

If the text is enclosed in a block tag, then it needs to set the property display: inline;, otherwise float:left; may not work.

File style.css

table{
     float: left;
     border: 5px solid blue; 
     border-collapse: collapse;
}
p{
    display: inline;
}

Direct inclusion

<table style="float: left; border:5px solid blue; border-collapse: collapse;">
..........
</table>
<p style="display: inline;">yada-yada-yada-yada-yada-yada
yada-yada-yada-yada-yada-yada
yada-yada-yada-yada-yada-yada</p>

yada-yada-yada-yada-yada-yada
yada-yada-yada-yada-yada-yada
yada-yada-yada-yada-yada-yada-yada-yada-yada- yada-yada-yada
yada-yada-yada-yada-yada-yada
yada-yada-yada-yada-yada-yada.

In order to set the external indents, use the margin property.

margin: 10px 20px 20px 40px;

Where the first digit is indent on the top.

The second digit is the indent on the right.

The third digit is indent from on the bottom.

The fourth digit is indent from on the left.

When using the value auto, only three values are indicated.

margin: 10px auto 20px;

Where the first digit is indent on the top.

auto – Horizontal alignment

The third digit is indent from on the bottom.

b) Alignment and indents within the table.

The contents of the top row of the table, tag th, browsers default display in bold and aligned in the center of the cell.

To align the contents of all the cells in a table, use the property text-align to which you can set the values left, center, right.

Since browsers align text to the left by default, center is mainly used.

File style.css

table{
     text-align: center;
     width: 350px;
     border: 5px solid blue; 
     border-collapse: collapse;
}

Direct inclusion

<table style="text-align: center; width: 350px; border:5px solid blue; border-collapse: collapse;">
..........
</table>

By default, the browser chooses the size of the cells by the size of the content with a small indentation.

Чтобы увеличить отступы и увеличить размер ячеек и всей таблицы, используется свойство padding

The padding property is entered in the th, td tags.

 style.css

table{
     text-align: center;
     width: 350px;
     border: 5px solid blue; 
     border-collapse: collapse;
}
th, td{
     padding: 10px;
}

If you need to make rows of different heights, then the padding property is entered by direct inclusion.

In this case, it is enough to set the required indent to only one cell, and the rest will align with it.

<table style="border:5px solid blue;">
<tr style="background:#FFE4B5;">
<th style="padding: 10px; border:2px solid #228B22;">One</th>
<th style="border:2px solid #228B22;">Two</th>
<th style="border:2px solid #228B22;">Three</th>
<th style="border:2px solid #228B22;">Four</th>
</tr>
<tr style="background:#FFDAB9;">
<td style="padding: 10px; border:2px solid #00FF7F;">1</td>
<td style="border:2px solid #00FF7F;">2</td>
<td style="border:2px solid #00FF7F;">3</td>
<td style="border:2px solid #00FF7F;">4</td>
</tr>
<tr style="background:#EEE8AA;">
<td style="padding: 20px; border:2px solid #00FF7F;">1а</td>
<td style="border:2px solid #00FF7F;">2а</td>
<td style="border:2px solid #00FF7F;">3а</td>
<td style="border:2px solid #00FF7F;">4а</td>
</tr>
<tr style="background:#F0E68C;">
<td style="padding: 25px; border:2px solid #00FF7F;">1b</td>
<td style="border:2px solid #00FF7F;">2b</td>
<td style="border:2px solid #00FF7F;">3b</td>
<td style="border:2px solid #00FF7F;">4b</td>
</tr>
<tr style="background:#FFFF00;">
<td style="padding: 30px; border:2px solid #00FF7F;">1c</td>
<td style="border:2px solid #00FF7F;">2c</td>
<td style="border:2px solid #00FF7F;">3c</td>
<td style="border:2px solid #00FF7F;">4c</td>
</tr>
</table>

It is necessary to take into account that, taking into account the indentation, the cell sizes are regulated by default by the size of the content, and all cells and columns take the size of the largest.

5. Merge cells.

Merging cells is performed using attributes only.

Cell connection attributes apply to th, td tags.

To merge cells horizontally, the colspan attribute is used, the value of which indicates the number of cells to be merged.

When merging cells, extra cells will appear that need to be removed from the code.

<table style="border:5px solid blue;">
<tr style="background:#FFE4B5;">
<th colspan="2" style="padding: 10px; border:2px solid #228B22;">One</th>
<th colspan="2" style="border:2px solid #228B22;">Two</th>
</tr>
<tr style="background:#FFDAB9;">
<td style="padding: 10px; border:2px solid #00FF7F;">1</td>
<td style="border:2px solid #00FF7F;">2</td>
<td style="border:2px solid #00FF7F;">3</td>
<td style="border:2px solid #00FF7F;">4</td>
</tr>
<tr style="background:#EEE8AA;">
<td style="padding: 10px; border:2px solid #00FF7F;">1а</td>
<td style="border:2px solid #00FF7F;">2а</td>
<td style="border:2px solid #00FF7F;">3а</td>
<td style="border:2px solid #00FF7F;">4а</td>
</tr>
<tr style="background:#F0E68C;">
<td style="padding: 10px; border:2px solid #00FF7F;">1b</td>
<td style="border:2px solid #00FF7F;">2b</td>
<td style="border:2px solid #00FF7F;">3b</td>
<td style="border:2px solid #00FF7F;">4b</td>
</tr>
<tr style="background:#FFFF00;">
<td style="padding: 10px; border:2px solid #00FF7F;">1c</td>
<td style="border:2px solid #00FF7F;">2c</td>
<td style="border:2px solid #00FF7F;">3c</td>
<td style="border:2px solid #00FF7F;">4c</td>
</tr>
</table>

To merge cells vertically, the rowspan attribute is used, the value of which indicates the number of cells to be merged.

<table style="border:5px solid blue;">
<tr style="background:#FFE4B5;">
<th colspan="2" style="padding: 10px; border:2px solid #228B22;">One</th>
<th colspan="2" style="border:2px solid #228B22;">Two</th>
</tr>
<tr style="background:#FFDAB9;">
<td rowspan="2" style="padding: 10px; border:2px solid #00FF7F;">1</td>
<td style="border:2px solid #00FF7F;">2</td>
<td style="border:2px solid #00FF7F;">3</td>
<td style="border:2px solid #00FF7F;">4</td>
</tr>
<tr style="background:#EEE8AA;">
<td style="padding: 10px; border:2px solid #00FF7F;">2а</td>
<td style="border:2px solid #00FF7F;">3а</td>
<td style="border:2px solid #00FF7F;">4а</td>
</tr>
<tr style="background:#F0E68C;">
<td rowspan="2" style="padding: 10px; border:2px solid #00FF7F;">1b</td>
<td style="border:2px solid #00FF7F;">2b</td>
<td style="border:2px solid #00FF7F;">3b</td>
<td style="border:2px solid #00FF7F;">4b</td>
</tr>
<tr style="background:#FFFF00;">
<td style="padding: 10px; border:2px solid #00FF7F;">2c</td>
<td style="border:2px solid #00FF7F;">3c</td>
<td style="border:2px solid #00FF7F;">4c</td>
</tr>
</table>

The number and location of the merged cells of the table, is constructed depending on the task.

Links HTML < < < Category > > >

This entry was posted in Html basics. Bookmark the permalink.
А так же:

Leave a Reply

Your email address will not be published. Required fields are marked *