A table is one of the main tools for creating web pages.
Without using CSS, only using tables you can create pages with complex designs. If you have completed the series of lessons Making a website - the first steps, then you understand what we are talking about.
Any table is a set of rows and columns, at the intersection of which there are cells. For example:
Let's look at our table from an HTML perspective:
- the table itself is specified using tags
,
- the table has a name - tags
,
- the table consists of rows - tags
|
, - each row consists of columns - tags
|
, - columns have names located in the first row - tags
|
.
Let's create a table where we indicate the intersection of row and column numbers as the content:
Result:
As you can see, it didn’t turn out very nicely, we’ll decorate it.
HTML table parameters: indentation, width, background color, frame
For this purpose the tag
There are a number of parameters:- width- sets the width of the table (in pixels or % of the screen width),
- bgcolor- sets the background color of table cells,
- background- fills the table background with a pattern,
- border- sets a border of the specified width (in pixels) around the entire table,
- cellpadding- sets the padding in pixels between the cell border and its contents.
Let's apply these parameters: Result:
This is better, but our table is pressed to the left edge of the window, as is the text in it. Let's fix this by adding three more parameters:
- align- sets the table alignment: left (right), right (left), center (center),
- cellspacing- sets the distance between table cells (in pixels),
- cellpadding- sets the distance between the text and the inner border of the table cell (in pixels).
Let's apply these parameters: Result:
Please note that the table has double borders. If you specify cellspacing="0", then the boundaries will take the usual form:
Result:
In general, two parameters are responsible for boundaries:
- frame- sets the type of frame around the table and can take the following values:
- void- no frame,
- above- only the top frame,
- below- bottom frame only,
- hsides- only the top and bottom frames,
- vsides- only left and right frames,
- lhs- left frame only,
- rhs- right frame only,
- box- all four parts of the frame.
- rules- sets the type of internal table boundaries and can take the following values:
- none- there are no borders between cells,
- groups- boundaries only between groups of rows and groups of columns (will be discussed a little later),
- rows- borders only between lines,
- cols- boundaries are only between columns,
- all- display all borders.
Using these parameters, you can set the boundaries the way you want. Here we will give only one example, experiment with them all yourself. Result:
It should be noted that borders are displayed slightly differently in different browsers.
HTML tags tr and td
Tables are formed row by row. Therefore, the parameters specified in the line (tr) extend their effect to all cells (td) of the line. Strings can have three parameters:
- align- aligns text in cells horizontally, can take values: left (right), right (left), center (center),
- valign- aligns text in cells vertically, can take values: up (top), down (bottom), centered (middle),
- bgcolor- sets the color of the line.
Let's look at an example: - width- sets the column width (in pixels or as a percentage, where 100% is the table width),
- height- sets the height of the cell, and all cells in the same row will become of this height.
For example, let's add to our code, in the tags
these parameters | | 1
|
2
|
3
|
|---|
Result:
It should be noted that if you do not set the width and height, the table will be formed according to the content (this was the case in the previous examples).
This lesson is over, practice creating and designing tables, you will need these skills in the next lesson, where we will create tables of complex structures.
A header cell or a regular cell in each row.
Table created by tag
can be divided into header, footer and body using , .
You can add a caption to a table using the tag.
Inside the table
You can divide not only by rows, but also by columns using tags and .
HTML tables
You should not use HTML page frames for layout. Use them to display content in a structured, tabular format.
Syntax
Examples of using tables
in HTML code
Below are 2 options for HTML tables.
Simple HTML table
HTML code for a complex table
Table signature
Header cell 1 |
Header cell 2 |
Header cell 3 |
|---|
Header cell 4 |
Header cell 5 |
Header cell 6 |
|---|
Cell 1 |
Cell 2 |
Cell 3 |
Cell 4 |
Browser support
| Tag |
|
|
|
|
|
Attributes
HTML5 tag has no attributes.
Deprecated table tag attributes
| Attribute |
Values |
Description |
|---|
| align |
left
right
center
justify |
Specifies the horizontal alignment rule for table contents. In HTML5 use CSS. |
| bgcolor |
rgb
HTML hex
HTML colorname
|
Background color. In HTML5 use CSS.
Examples:
RGB: rgb(226,112,017), rgb(0, 40, 129).
HTML hex:#1a2a2c, #eee.
HTML colorname: black, yellow;
|
| border |
number
|
The width of the table borders in pixels. Default: 0 - no boundaries are displayed.
In HTML5 use CSS. |
| cellpadding |
number
|
Indentation from cell borders to their contents. The value indicates the number of pixels. In HTML5 use CSS. |
| cellspacing |
number
|
The space between cell borders. The value indicates the number of pixels. In HTML5 use CSS. |
| frame |
void
above
below
lhs
rhs
vsides
hsides
box
border |
Determines which outer boundaries will be displayed:
void- all borders are hidden;
above- only the upper limit;
below- only the lower limit;
lhs- left border only;
rhs- right border only;
vsides- vertical boundaries;
hsides- horizontal boundaries;
box or border- all boundaries.
In HTML5 use CSS.
|
| rules |
none
groups
rows
cols
all |
Determines which internal borders will be displayed:
none- everything is hidden;
groups- group boundaries;
rows- line boundaries;
cols- column boundaries;
all- All;
In HTML5 use CSS.
|
| summary |
text
|
Description of the table. |
| width |
pixels
interest
|
Table width. In HTML5 use CSS. |
Thanks to the versatility of tables and the large number of parameters that control their appearance, tables have long become a definite standard for the layout of web pages. A table with an invisible border looks like a modular grid, in the blocks of which it is convenient to place web page elements. However, this is not a completely correct approach, because each HTML object is defined for its own purposes, and if it is not used for its intended purpose, and everywhere, this means that there are no alternatives. This was the case for a long time, until layers replaced tables in website layout. This does not mean that layers are now used all the time, but the trend has already clearly emerged - tables are used to place tabular data, and layers are used for layout and design.
Creating a table
A table consists of rows and columns of cells that can contain text and pictures. Tables are typically used to organize and present data, but tables are not limited to that. Using tables, it is convenient to layout page layouts by arranging fragments of text and images in the desired way.
To add a table to a web page, use the tag . This element serves as a container for elements that define the contents of the table. Any table consists of rows and cells, which are specified respectively using tags And | . The table must contain at least one cell (example 12.1). Allowed instead of tag | use tag | . Text in a cell styled with a tag | , is displayed by the browser in bold font and aligned to the center of the cell. Otherwise, the differences between cells created through tags | And | No.
Example 12.1. Creating a table
TABLE tag
| Cell 1 |
Cell 2 |
| Cell 3 |
Cell 4 |
The order of the cells and their appearance is shown in Fig. 12.1.
1. What are HTML tables and why are they needed? html tables- this is one of the most basic components of every html page and, accordingly, every site. For example, the entire site consists of tables: pictures, texts, links, registration forms - everything is placed relative to each other using html tables (in fact, the entire site is also located in one large table).
2. What tags do html tables have?
Tags, defining the html table are written like this:
But since we know that all tables consist of rows and columns (cells), so we need to set tags for them too:
| |
- html table line
| - column (cell) of an html table.
Now let's try to combine all the tags into one table. To do this, we will create an html table that consists of two rows and three columns:
This html table is very easy to make. First, let’s put the tags of the table itself, inside which we place the required number of rows (in our example, 2 rows):
Then we split each row into cells using column tags:
|
- cell 1.1
|
- cell 1.2
|
- cell 1.3
|
- cell 2.1
|
- cell 2.2
|
- cell 2.3
In fact, the first digit in the inscriptions is the row number, and the second is the cell number (1x2 - first row, second cell, etc.).
3. How to set the background color of html tables?
Now let's figure out how to set the background of the table or each cell separately.
So, to set the background the attribute is used bgcolor="background_color".
For example, if we need to set one color for the entire sign, then we do it like this:
bgcolor="background_color">
|
- cell 1.1
|
- cell 1.2
|
- cell 1.3
|
- cell 2.1
|
- cell 2.2
|
- cell 2.3
For example, if you need to make a yellow sign, then we write:
If needed set the background color for the row html table, then the attribute bgcolor="background_color" apply to tag :bgcolor="#FFFF00">
bgcolor="#0000FF">
1.1 |
1.2 |
1.3 |
2.1 |
2.2 |
2.3 |
|
In this case, the attribute cell number
sets the white color to the text located inside the tag.
In exactly the same way it is specified color of each cell separately. For example, if you want to change the color of cell 1.2 to blue, then inside the opening tag attribute bgcolor="background_color":
4. How to set the size of the width and height of html table cells?
So, in order to manually set the width and height of cells, use the height and width attributes. They can be set for the entire table, for one row, or for a cell (column). Height and width can be specified in either pixels or percentages. In our case, we will set the width and height in pixels for the columns (cells).
height- attribute that sets the height of the cell
width- attribute that specifies the width of the cell
And now for an example:
Now I'll explain why we set the cell height only once in each row.
If in a row you set a height for any cell greater than for others, then, despite this, all cells (columns) of your row will be equal in height to the largest one. And the width of each row is best set separately!
You can set the height and width for the entire table. In this case, all cells (columns) and rows will divide the space given to them equally, if you do not set these parameters to them personally (as a percentage of the total width (height) of the table or in pixels).
Also, very often you have to set the height height and width width in percentages:
| cell contents |
If we set the width of a cell to 40 percent, as in our example, this means that we still have 60 percent left for the remaining cells, i.e. the sum of their widths should not exceed 60 percent. Everything is very simple: in total we have only 100%. We count: 100 – 40 = 60.
5. How to align text inside an html table?
Now let's figure out how to align the text in our html table to the left, right and center.
This is done using the attribute:
align=”left”- aligns the text inside the html table to the left
align=”center”- aligns the text of the html table to the center
align=”right”- aligns the text inside the html table to the right
Accordingly, the align attribute can also take the values right and left. The meaning of justify when used with a tag the align attribute cannot be accepted.
For example, the html code for a table whose text is centered looks like this:
align="center">
align="left"> 1x1 |
align="center">1.2 |
align="right"> 1x3 |
align="left">2.1 |
align="center"> 2x2 |
align="right">2.3 |
|
By registering the attribute align="center" in the opening , we aligned the html table to the center of the browser page.
This is the result you will get in the browser:
Now let’s look at an example of how to align text inside an html table along the top or bottom edge, that is, how you can make sure that the contents of a cell are not only located exactly in the middle of it (as by default), but also at the top or bottom.
Vertical alignment is specified by the attribute:
valign="top"- the content will be located at the top of the cell
valign="middle"- the content will be located in the center of the cell
valign="bottom"- the content will be located at the bottom of the cell
Let's look at these attributes using our example:
valign="top"> 1x1 |
1.2 |
valign="top"> 1x3 |
valign="bottom">2.1 |
2x2 |
valign="bottom">2.3 |
|
This is what we get if we look at the result of the attributes in the browser: align And valign:
6. How to combine cells and columns of an html table?
In this part of our article we will talk about attributes colspan And rowspan.
colspan- determines the number of columns that a given cell covers
rowspan- determines the number of rows to which this cell extends
Values colspan And rowspan can take a value from 2 or more, i.e. a cell can stretch across two or more columns (rows).
So, now, using the example, we will stretch a 1x1 cell into two columns (cells). To do this, we will use the colspan="2" attribute, assigning it to a 1x1 cell. The code will look like this:
As we can see, the 1x1 cell extends over the length of two cells. Accordingly, its length is equal to the summed length of these two cells (160 pixels). We didn't specify a width attribute for the 1x1 cell, but if we decided to do so, we would set the width to 160 pixels. And also, please note that in our example there is no 1x3 cell, i.e. there are only two cells in the first row, why - we have already discussed this - a 1x1 cell is equal to two cells, thanks to the colspan attribute.
The colspan and rowspan attributes must be handled very carefully. An error may cause your site to crash.
And now that we understand the colspan parameter, let's look at the rowspan parameter. The principle of operation is the same:
colspan="2"> 1.1 |
1.2 |
2.1 |
2.2 |
|
Thus, we learned how to combine cells in rows and columns of html tables.
7. How to remove, add or change indents and how to set a frame for an html table?
So, earlier we created an html table, the indents between the cells are clearly visible. To make them visible even better, let's add a frame for our table. This is done using attributes:
border="border width in pixels"- sets the frame width
bordercolor="border color"- sets the frame color
Let's, for example, give our html table a black frame 1 pixel wide.
For this tag add attributes:
Now we can clearly see the indents between the cells of the html table and the indents from the inner edges of the cells to the text. Therefore, we can manage these indentations without any problems. The attributes are for this purpose:
cellspacing="space width in pixels"- space between cells
cellpadding="padding width in pixels"- indentation inside the cell (from the edge of the cell to the text, image, link...)
For example, let's make the indent between cells 10 pixels, and increase the indent from the edge of the cell to the text to 20 pixels. This is done like this:
cellpadding="20" cellspacing="10">
1.1 |
1.2 |
2.1 |
2.2 |
|
If we look at the result in the browser, we clearly see that the distance between cells ( cellspacing) of our html table has increased to 10 pixels, and the distance between the text and the inner edge of the cell has increased by 20 pixels.
If you need to remove indents altogether, then simply put cellpadding="0" And cellspacing="0".
8. How to insert one html table inside another?
We are approaching the final stage of studying html tables. Now we will learn how to insert one table inside another.
Using the example, inside cell 1.2 we will insert a new table consisting of one row and two columns. In the internal html table we will set a red border with a width of 2 pixels and a distance between cells of 0 pixels. We will also place the internal table at the top of the cell.
This is done very simply:
This is what happened as a result of the new transformations of our table (red cells are an internal table located inside a large table):
At this point we will finish this article. I think it turned out to be successful and not difficult to understand, and I hope you won’t have any more problems with the tables.
A table is a grid of cells that form rows and columns. Examples of tables include various financial reports, results of sports competitions, calendars, schedules, etc. An individual grid block is called a table cell. Table cells can contain a wide variety of information, including numbers, text, and even video and audio objects. Using HTML, tables are written row by row.
Element
serves as a container for elements that define the contents of the table. To create a table row, you need to add inside the element
paired block tag
(abbreviated from the English “tablе row” – table row). How many tags
you add, there will be so many rows in the table. Opening tag
marks the beginning of a new table row. Elements are placed after it |
(abbreviated from the English “tablе data” - table data), each of which specifies a separate cell in this row. Inside an element |
you put your content (text, numbers, images, etc.) displayed in this cell. The end of the line is indicated by a closing tag |
.
Element
(abbreviated from the English “tablе heading” - table heading) - an optional table element that is used in exactly the same way as an element |
, however its purpose is to create a row or column header. Typically, the element |
placed in the first row of the table. Browsers display text in an element |
in bold and center it relative to the cell. Application in element code |
helps people who use screen reader programs, and also improves the performance of search engines indexing tables.
Consider a simple table that consists of three rows and three columns, with the cells in the first row being the headings of the corresponding columns. By default, tables are usually displayed without a border:
Example: Simple HTML Table
| Heading 1 | Heading 2 | Heading 3 |
|---|
| Cell 2x1 | Cell 2x2 | Cell 2x3 |
| Cell 3x1 | Cell 3x2 | Cell 3x3 |
Table Border
We already know that by default tables are displayed without a border. To add a border around a table, you need to specify a few simple style sheet rules in your document. Property border controls the display of table grid lines and also sets the thickness of the border around the table in pixels. A border appears around the table and between cells. Let's add a one-pixel thick frame to the already created table by setting the property border for all table elements, for example, like this:
Example: Applying a Property border
Frame around the table
| Heading 1 | Heading 2 | Heading 3 |
|---|
| Cell 2x1 | Cell 2x2 | Cell 2x3 |
| Cell 3x1 | Cell 3x2 | Cell 3x3 |
Single frame for table
By default, adjacent table cells will have their own border. This results in a sort of "double frame" as seen in the example above. To get rid of the "double border" add a CSS property border-collapse to your style sheet:
Example: Applying a Property border-collapse
Frame around the table
| Heading 1 | Heading 2 | Heading 3 |
|---|
| Cell 2x1 | Cell 2x2 | Cell 2x3 |
| Cell 3x1 | Cell 3x2 | Cell 3x3 |
Table fields and intervals
By default, the size of table cells adjusts to their content, but sometimes it is necessary to leave a little padding around the table data. Because spacing and margins are data presentation elements, this space is customized using CSS style sheets. Cell field ( padding) is the distance between the contents of the cell and its border (border). To add it, use the property padding to element |
or |
. Cell interval ( border-spacing) is the distance between them ( |
or |
). First assign a value separate property border-collapse element
, and then set the distance between cells by changing the value of the parameter border-spacing. Previously, attributes were responsible for the fields and cell spacing cellpadding And cellspacing element
, but they were deprecated by the HTML5 specification.
Usage example padding And border-spacing:
Example: Applying Properties padding And border-spacing
padding and border-spacing
| Cell 1 | Cell 2 |
| Cell 3 | Cell 4 |
Table width
The width occupied by the table in the browser window can be specified using the property width CSS, in pixels or percentages. Specifying the width of the table in pixels allows you to determine its exact width. The percentage ratio allows you to make the table flexible, i.e. it will "stretch" or "shrink" depending on what other elements are on the page and the size of the browser window.
Here is an example of using the property width: Table (width: 100%;) Example: Applying a Property width
| Cell 1 | Cell 2 |
| Cell 3 | Cell 4 |
width: 100%
| Cell 1 | Cell 2 |
| Cell 3 | Cell 4 |
Merging cells (colspan and rowspan)
One of the main features of table structure is cell merging, which involves stretching a cell to span multiple rows or columns. This allows you to create complex table structures: headers
or cells |
are combined by adding attributes colspan or rowspan. Attribute colspan determines the number of cells over which a given cell extends horizontally, and rowspan- vertically.
Merging Columns
Combining columns is achieved using the attribute colspan in elements |
or |
— the cell stretches to the right, covering subsequent columns. In the following example, the attribute value colspan equals 2, which means the cell must span two columns.
Example: Applying an Attribute colspan
colspan attribute
| colspan="2">Cell with two columns |
|---|
| Cell 1 | Cell 2 |
| Cell 3 | Cell 4 |
Concatenating Strings
Strings concatenated using attribute rowspan, behave exactly the same as merged columns, except that the range of cells is specified from top to bottom and spans multiple rows.
This example stretches the first table cell down two rows:
Example: Applying an Attribute rowspan
| Two-line cell |
Cell 1 | Cell 2 |
|---|
| Cell 3 | Cell 4 |
rowspan attribute
| rowspan="2">Cell with two lines |
Cell 1 | Cell 2 |
|---|
| Cell 3 | Cell 4 |
Table title
A paired tag is used to create a table title or caption
(from the English caption - signature). Element
designed to organize the table header. Located immediately after the tag
, but outside the row or cell description.
Example: Applying a tag
Caption element
This is the table header
| Two-line cell |
Cell 1 | Cell 2 |
|---|
| Cell 3 | Cell 4 |
Tags for grouping table elements
Tags are used to group table elements
,
And
. Just as a web page can contain a header, body, and footer, a table can contain a head, body, and footer. To logically group rows at the top of the table (that is, to create the top header of the table), use the tag
. Table headers must be placed in the element
, For example:
| Heading 1 | Heading 2< /th> |
|---|
The main content (body) of the table must be inside the element
(there may be several such blocks in the table). To logically group rows at the bottom of the table (that is, to create a “footer” of the table), use the tag
(no more than one tag is allowed in one table
). In the source code the tag
placed before the tag
. In addition to logical grouping, one of the reasons for using elements
And
is that if your table is too long to display on screen (or print) at once, then the browser will also display the header (
) and the last line (
) when the user starts scrolling your table.
| | | |
