In detail and clearly about html5 tables. This is a big text
This lecture discusses in detail the principles of using tables in HTML markup. This includes a tabular organization of text, a tabular coordinate grid, and graphics organized in tables.
Tools for describing tables in HTML
As the WWW developed, it became clear that the funds contained in HTML were not enough for high-quality display various types documents. The disadvantage of HTML was the lack of tools for displaying tables. For this purpose, preformatted text (tag
), in which the table was outlined in ASCII characters. But this form of table presentation was not enough High Quality and stood out from the general style of the document. After the introduction of tables in HTML, Webmasters had not just a tool for placing text and numerical data, but a powerful design tool for placing graphic images and text in the right place on the screen.Creating tables in HTML
The tag is used to describe tables<ТАВLЕ>. Tag<ТАВLЕ>, like many others, automatically translates the line before and after the table.
Creating a table row - tag<ТR>
Tag<ТR>(Table Row) creates a table row. All text, other tags and attributes that need to be placed on one line must be placed between the lt;TR> tags.
Defining table cells - tag<ТD>
Cells with data are usually placed inside a table row. Every cell containing text or image must be surrounded by tags<ТD>. Number of tags<ТD>in a row defines the number of cells
Table
If a table has two TR tags, then it has two rows. If there are three TD tags in a line, then in it three columns. Table column headings - tag<ТН>
Headings for table columns and rows are set using the header tag<ТН>(TableHeader, table title). These tags are similar<ТD>. The difference is that the text enclosed between the tags<ТН>, is automatically written in bold and is placed in the middle of the cell by default. You can uncenter the text and align the text to the left or right. If you use<ТD>with tag<В>and attribute<АLIGN=center>, the text will also look like a title. However, be aware that not all browsers support in tables bold font, so it's better to set table headers using<ТН>.
| Header is centered by default | The header can join columns | |
|---|---|---|
| The header can be placed before the columns | Text or data | Text or data |
| Header can concatenate lines | Text or data | Text or data |
| Text or data | Text or data | |
| Text or data | Text or data | |
Using table headers - tag<САРТIОN>
Tag
| Text or data | Text or data | Text or data | Text or data |
| Text or data | Text or data | Text or data |
NOWRAP attribute
Typically, any text that does not fit on one line of a table cell goes to next line. However, when using the NOWRAP attribute with tags<ТН>or<ТD>The length of the cell is expanded so that the text contained within it fits on one line.
COLSPAN attribute
Tags<ТD>And<ТН>modified using the COLSPAN attribute (Column Span, column connection). If you want to make a cell wider than the top or bottom, you can use the COLSPAN attribute to stretch it over any number of regular cells.
| If you want to make any cell wider than the top or bottom, | you can use the COLSPAN=2 attribute, |
| to stretch it over any number of regular cells. | |
ROWSPAN attribute
ROWSPAN attribute used in tags<ТD>And<ТН>, is similar to the COLSPAN= attribute, only it specifies the number of lines over which the cell is stretched. If you specified a number greater than one in the ROWSPAN=s attribute, then the corresponding number of rows must be under the stretched cell. It cannot be placed at the bottom of the table.
WIDTH attribute
The WIDTH attribute is used in two cases. You can put it in a tag<ТАВLЕ>to give the width of the entire table, or can be used in tags<ТD>or<ТН>to set the width of a cell or group of cells. The width can be specified in pixels or as a percentage. For example, if you set in the tag<ТАВLЕ>WIDTH=250, you will get a table that is 250 pixels wide regardless of the page size on your monitor. When setting WIDТН=50% in the tag<ТАВLЕ>the table will occupy half the width of the page at any image size on the screen. So, when specifying the table width as a percentage, keep in mind that if the user has a narrow viewport, your page may look a little weird. If you are using pixels and the table is wider than the viewing area, a scroll bar will appear at the bottom to move left and right across the page. Depending on the tasks at hand, either method of setting the width of the table may be useful.
| Text or data - width 100% |
| Text or data - width 50% |
| Text or data - 200 pixels wide |
| Text or data - 100 pixels wide |
Applying empty cells
If a cell contains no data, it will have no borders. If you want a cell to have borders but no content, you need to put something in it that won't be visible when viewed. You can use an empty string<ВR>. You can even define empty columns by specifying their width in pixels or relative units and without entering any data into the resulting cells. This tool can be useful when placing text and graphics on a page.
CELLADDING attribute
This attribute specifies the width empty space between the contents of the cell and its borders, that is, it sets the margins inside the cell.
| Text or data | Text or data | Text or data |
| Text or data | Text or data | Text or data |
| Text or data | Text or data | Text or data |
| Text or data | Text or data | Text or data |
ALIGN and VALIGN attributes
Tags<ТR>, <ТD>And<ТН>can be modified using the ALIGN and VALIGN attributes. The ALIGN attribute determines whether text and graphics are aligned horizontally, that is, left or right, or centered. Horizontal alignment can be specified in several ways:
ALIGN=bleedleft presses the contents of the cell close to the left edge.
ALIGN=left Aligns the contents of the cell to the left, taking into account the indentation specified by the CELLPADDING attribute.
ALIGN=center Centers the contents of the cell.
ALIGN=right Aligns the contents of a cell to the right, taking into account the indentation specified by the CELLPADDING attribute.
| Text or data | Text or data | Text or data |
| Text or data | Text or data | Text or data |
| Text or data | Text or data | Text or data |
| Text or data | Text or data | Text or data |
| Text or data | Text or data | Text or data |
VALIGN attribute Aligns text and graphics inside a cell vertically. Vertical alignment can be specified in several ways:
VALIGN=top Aligns the contents of a cell to its top border.
VALIGN=middle Centers the contents of the cell vertically.
VALIGN=bottom Aligns the contents of a cell to its bottom border.
| The VALIGN attribute vertically aligns text and graphics within a cell. | top, | middle, | bottom. |
| VALIGN=top Aligns the contents of a cell to its top border. | top, | top, | top. |
| VALIGN=middle Centers the contents of a cell vertically. | middle, | middle, | middle. |
| VALIGN=bottom Aligns the contents of a cell to its bottom border. | bottom, | bottom, | bottom. |
BORDER attribute
In the tag<ТАВLЕ>often determine how the borders, that is, the lines surrounding the table cells and the table itself, will look. If you do not specify a frame, you will get a table without lines, but space will be allocated for them. The same result can be achieved by setting<ТАВLЕ ВОRDER=0>. Sometimes you want to make the border thicker so that it stands out better. To attract attention to a picture or text, you can set exclusively bold borders. When creating nested tables, you have to make borders of different thicknesses for different tables to make them easier to distinguish.
CELLSPACING attribute
The CELLSPACING attribute specifies the width of the spaces between cells in pixels. If this attribute is not specified, the default value is two pixels. Using the CELLSPACING= attribute, you can place text and graphics wherever you need them. If you want to leave empty place, you can enter a space in the cell.
| Text or data | Text or data | Text or data |
| Text or data | Text or data | Text or data |
| Text or data | Text or data | Text or data |
| Text or data | Text or data | Text or data |
| Text or data | Text or data | Text or data |
| Text or data | Text or data |
BGCOLOR attribute
This attribute allows you to set the background color. Depending on which tag (TABLE, TR, TD) it is used with, the background color can be set for the entire table, for a row, or for an individual cell. The value of this attribute is the RGB code or standard color name.
| Text or data | Text or data | Text or data |
| Text or data | Text or data | Text or data |
BACKGROUND attribute
This attribute specifies the background image for tables. Applies to TABLE and TD tags. Its value is the URL of the file with background image. The use of this attribute is discussed below.
Using tables in page design
The good thing about tables is that you can make their borders invisible if you want. This allows using the tag<ТАВLЕ>beautifully place text and graphics on the page. Bye tag<ТАВLЕ>remains the only one a powerful tool formatting in HTML. Web page designers now have almost the same freedom with regard to the use of white space as printed page designers. Tables are the best way to move away from hierarchical placement of text on Web pages.
If the browser supports tables, it will usually correctly display the most interesting effects obtained using them
Ural State Pedagogical UniversityWelcome!
|
Using tables in design
Creating colorful tables
Some browsers allow you to display colors. There are several ways to color a table, mostly depending on the browser you are using.
Colored borders in Netscape Navigator. Not only can you surround the table beautiful frame, but also set a color for it that is different from the text and background colors. Create a simple gray GIF (or any GIF you would like to have as a background) and define it in a tag<ВODY>as a page background. Then set the page background color. As a result, your tag<ВОDY>will look something like this:
You have created a double background - GIF and specified color. As a result background color will be visible on all table borders and horizontal lines (<НR>). Whether your background GIF is gray or not, the colored lines and table borders will stand out noticeably. If the background GIF is not too complex, the page load time will only increase slightly.
Each table consists of rows and cells, with a minimum of one row and one cell. In this case, however, it is not clear why use a table, because there is no longer a table view as such. In addition, you can give the table a title that briefly describes its contents, specify the “header”, “body” and “footer” of the table. They are needed to highlight part of the data in style or meaning. Example 1 shows how to create a table containing all of the components mentioned.
Example 1: Creating a table
| Strength class | Technological processes | steel grade | Standard designation |
|---|---|---|---|
| 4 | Hot stamping | 20, St3kp3, St3sp3 | GOST 1050–79 |
| 5 | Cold stamping | 10, 10kp | GOST 0702–78 |
| Hot stamping | 20 | ||
| 6 | Cold stamping | 10, 10kp, 15, 15kp | GOST 0702–78 |
| 8, 9 | Hot stamping | 35 | GOST 1050–74 GOST 4543–71 GOST 10702–78 |
| Cold stamping | 20, 20kp | ||
| Strength class | Technological processes | steel grade | Standard designation |
Result this example shown in Fig. 1.
Rice. 1. Table with title, header and footer
When using elements ,
- Table title
written at the very top of the table, immediately after the opening tag .
- inserted at the top of the table, immediately after the header, if present.
- inserted after , and is always displayed at the very bottom of the table.
- Element required for tables, but for simple tables without And it may not be specified. Browsers themselves have learned to insert it automatically into the code, realizing that most developers are too lazy to add an element that visually does not affect the table in any way.
- there may be one or more, you decide for yourself on what basis to add them. For example, in the example above, some rows have cell merges and so that the rows, when hovering the mouse cursor over them, are highlighted as we require, we merge them into according to our logic.
Columns
In addition to concatenating a group of strings via There is another way to group cells - in columns using elements
And . Each table column is mapped to its own element which is written after the opening tag . Some columns can be combined using the span attribute; its value is the number of columns to be combined. Elements
may be placed in one or more , combining columns according to our concepts. Elements
And do not in any way affect the appearance of the table and its display in the browser and are used only with styles, as shown in example 2. Double lines are added between the columns. Example 2. Table columns
Table Nut strength class Mating bolts Strength class Thread diameter 4 3,6 4,6 4,8 > M16 5 5,6 5,8 ≤ M16 6 6,8 ≤ M48 The result of this example is shown in Fig. 2. Note that a similar result can be achieved by replacing the col selector in the styles with td and th .
If you need to display a table description, you can place it in an element
, located immediately after the opening tag . Next, the rows of the table are located sequentially, designated by the tag
. Each row contains cells or , thus forming the table columns. Elements
indicate cells with column or row headings. By default, browsers display their content in bold and centered. Tag The same is intended for all other cells with data. Availability of headers is optional, but the table must have at least one row with one cell. Using attribute border element
you can determine whether the table cells will be surrounded by a border or not. A value of 1 indicates that a border is needed, an empty value does not.
Merging cells
It is logical that each row should have the same number of cells so that the table has a rectangular appearance. But what if you need to stretch a cell into several columns or rows? The colspan and rowspan attributes of elements come to the rescue
And . By giving a cell the colspan="3" attribute, you tell the browser that this element takes the space of three cells in a row - its own and the next two. Accordingly, the next two cells do not need to be specified, and the line will contain 2 elements (or ) less. Merging cells in a table
Likewise, the rowspan="2" attribute, for example, in the fifth cell of a row means that it occupies two spaces in its column, and in the next element
the fifth cell must be skipped. Remember that if you apply one of these attributes, but forget to delete the “extra” cells, the browser will move them to the next column, moving the remaining cells even further and thereby distorting the table. . Finally, all other data rows are grouped into one or more elements . This way you can create the number of groups you need. Even though the lines from will be displayed last, place the element itself possible both after the last and before the first element (after ). There can only be one element per table And , and any quantity . These tags are visually the same until you define appropriate CSS styles for them.Grouping Rows and Columns
Another 5 tags are designed to combine rows and columns into groups. This is necessary when, for example, one header cell corresponds to several columns of data or, say, last line table contains total values, lexically standing out from the background of other rows.
Fruit fly population
For unification lines There are three tags in groups. First, rows with header cells can be placed in an element . Secondly, the final rows with “resulting” cells are included in the element
The example table above is generated with approximately the following code:
Average Red Eyes Size Weight Average 1.8 0.0025 41.5% Males 1.9 0.003 40% Females 1.7 0.002 43% If you are using or
, then we must use and . Moreover, each group must contain at least one line, and there should be no lines outside groups. For grouping columns empty tag is applied
and doubles . Unlike elements that group lines, these tags are placed immediately after the element or, if not present, after the opening tag . They do not include cells, but only indicate the columns to be merged. Both tags support a span attribute whose value is the number of columns to group. If span is not specified, then it is considered equal to one.
In fact,
does not create a group, but only allows you to define common column attributes without having to specify them in each cell. For example, to assign class="myData" to all cells of the first two columns, just add an element to the beginning of the table: allows you to do the same thing, but lexically groups the columns into a group. There may be times when you want to group columns but assign them different classes or other standard attributes. In this case, the element the required number of tags is placed . In this case, the span attribute is indicated only in them, and its value for determined automatically as the sum of the span values assigned to the elements inside it . Other tags in prohibited. Placing multiple elements in sequence
and/or in a table, you can achieve grouping of columns in any desired way. Remember that if you use these tags, you must end up listing all the table columns in them, the number of which is determined by the row, with the largest number cells. For example, if there are 5 columns in a table, and you need to group only the second and third, specifying the second and myGroup classes for them, respectively, then it will look like this: Element's scope attribute
allows you to specify whether this heading applies to a row, column, or any group. Valid values: Elements
And They also support the headers attribute, which allows you to additionally specify headers related to a given cell. To do this, cells with these headers must have id specified, which must be listed in the headers attribute separated by a space. 7 comments
I didn't notice any changes compared to html4.1.Yes, there are no innovations in the tables. However, most of the old attributes are not supported:
- In element
only the border attribute remains, with only two acceptable values("1" and "");
, , , ,devoid of all attributes; - In elements
, only support for colspan , rowspan and headers is left (and also scope for ); - In elements
And only the span attribute is left; Other attributes are no longer supported (not including global ones), although browsers will likely handle them for purposes of backward compatibility. An alternative is to use CSS.
P.S. There are some additions to the DOM. In particular, the element
appeared new method createTBody() . createTBody() - this supposedly creates the body of the table, as I understand it?
Correct, creates an element
,
inserts it at the end of the table (or after the last , if there is one) and returns a link.Var tbody = table.createTBody();
How to draw a table? Maxim, your question is not entirely clear. For visual design use CSS. Before this chapter, everything was extremely clear, but with the tables I don’t understand what’s what. :(Creating tables
HTML tables are created in four steps.
At the first stage in the HTML code using a paired tag
form the table itself:
An HTML table is a block element of a Web page. This means that it is placed separately from all other block elements: paragraphs, headings, large quotes, audio and video. So we won’t be able to insert a table into a paragraph. (It must be said that a table in a paragraph would look strange, to say the least...)
At the second stage, table rows are formed. Paired tags are provided for this
; Each such tag creates a separate line. Tags placed inside a tag (Listing 5.1).
Listing 5.1
At the third stage, table cells are created using paired tags
And . The tag creates a normal cell, and the tag creates header cell, in which the “header” of the corresponding table column will be placed. Tags And placed in tags , which creates the table rows in which these cells should appear (Listing 5.2). Listing 5.2
At the fourth and final stage, the contents of the cells are indicated, which is placed in the appropriate tags
And (Listing 5.3). Listing 5.3
Column 1 Column 2 Column 3 Cell 1.1 Cell 1.2 Cell 1.3 Cell 2.1 Cell 2.2 Cell 2.3 If we need to put simple text in a table cell, we can simply paste it into the appropriate tag
or (as shown in Listing 5.3). However, it is not necessary to enclose it in tags that create block elements. If we need to somehow format the contents of cells, we will apply what we have learned in chapter 3 tags. For example, we can give cell numbers special importance by using the tag ; as a result, they will be displayed in italics (Listing 5.4).
Listing 5.4
Cell 1.1 Cell 1.2 Cell 1.3 We can also place in the cell graphic image:
But it is often necessary to place large text, sometimes consisting of several paragraphs, in a table cell. In this case, those we know from Chapter 2 tags that create block-level page elements. Tags
And this is allowed (Listing 5.5). Listing 5.5
This is a big text
This is the beginning of a large text representing the contents of a table cell.
This is a continuation of the large text that represents the contents of the table cell.
And this long-awaited ending large text.
This HTML code puts a heading and four paragraphs into a table cell. Moreover, one of these paragraphs contains a graphic image, and part of the other is marked as very important (and will be typed in bold).
The HTML code that creates the tables can be a bit cumbersome. But this is the price for exceptional flexibility HTML tables. We can put any content into a table: paragraphs, headings, images, audio and video, and even other tables.
Now it's time to look at the rules that Web browsers follow when displaying tables on the screen.
A table is a block element of a Web page (we already talked about this).
The dimensions of the table and its cells are made to fully accommodate their contents.
There is a small amount of space between the borders of individual cells and between the border of each cell and its contents.
The text of header cells is displayed in bold and centered.
Frames around the entire table and around its individual cells are not drawn.
The table is just the content of the Web page, and the view is responsible for its output. (For more information about the content and presentation of a Web page, see chapter 1.) If we need, for example, to draw a frame around a table, we can create a corresponding view. This is what we will do in Part II.
And a few more rules according to which the HTML code of tables is created. If they are violated, the Web browser will display the table incorrectly or not display it at all.
Tag
can only be inside a tag (except for the table header and sections, which will be discussed later) will be ignored.
Tags
And can only be inside a tag . Any other tag content will be ignored. Table contents can only be contained in tags
And . Table cells must have at least some content, otherwise the Web browser may not display them at all. If some cell should be empty, you should place it in non-breaking space(HTML literal).
That's it, the theory is over. It's time to practice. Let's put it on Web page index.htm table listing all versions HTML language indicating the year of release. Let's insert it after the quote from Wikipedia and the horizontal line separating it.
Listing 5.6 contains an HTML snippet from the Web page index.htm that creates such a table.
Listing 5.6
Perhaps neither subtract nor add...
List of HTML versions:
HTML version Released Peculiarities 1.0 1992 Has not been officially standardized In contact with
Classmates
In the example below, the sample table is stripped down as much as possible to simplify the structure while you learn how tables work. However, there are other table elements, as well as attributes with more complex semantic descriptions, that increase the accessibility of tabular data for people with disabilities. A version of the same table with detailed markup looks like this:Calories and fat content of the most popular daily foods
dietDishes Calories Fat (g) Chicken bouillon 120 2 Caesar salad 400 26
Result on the page:
Row Group Elements.
Rows or groups of rows can be characterized as cells that belong to a single header, footer, or body of the table, using elements such as thead, tfoot, and tbody, respectively. Some user agents (synonymous with viewers) may repeat the table header and footer row on every page of the document. Using these elements, developers can also apply styles to different parts of the table.Column Group Elements.
Columns can be defined using the col element or grouped using the colgroup element. They are used if you need to add some semantic context to the data in the columns, and they can also be useful for quickly calculating the width of a table. Please note that these elements have no content, they simply describe the columns before the table data itself begins.Special abilities.
Such elements special features, like captions and summaries, provide a description of the table's contents. The scope and headers attributes are designed to uniquely match headers and the corresponding table data. We will discuss them later in this chapter.
It is beyond the scope of this book to provide an exhaustive examination of advanced table elements, but if you find yourself working with large tables, it is worth exploring these topics on your own. Detailed information you will find on the consortium website World Wide Web(www.w3.org/TR/html5).NOTE:
According to the HTML5 specification, a table must contain "in the following order: optional element caption, which may be followed by several (or no) colgroup elements, then an optional thead element, then an optional tfoot element, followed by several (or no) tbody elements or one or more tr elements, then an optional tfoot element (but in there can only be one in total child element tfoot)".Download an example of the extended table elements described above on a finished page in html format:
2024 gtavrl.ru.
- inserted at the top of the table, immediately after the header, if present.