The CSS specification gives unlimited possibilities for the design of tables. By default, a table and table cells do not have visible borders or backgrounds, and cells within a table do not sit close to each other.

The width of the table cells is determined by the width of their content, so the width of the table columns can be different. The height of all cells in a row is the same and is determined by the height of the tallest cell.

Table Formatting

1. Table borders

The table and cells inside it are displayed by default in the browser without visible borders. Table borders are set by the border property:

Table ( border-collapse: collapse; /*remove empty spaces between cells*/ border: 1px solid gray; /*set the outer border for the table gray color thick 1px*/ )

Header cell borders each column are set for the th element:

Th (border: 1px solid grey;)

Cell borders table bodies are specified for the td element:

Td (border: 1px solid grey;)

The thickness of the borders of adjacent cells is not doubled, so you can set the borders for the entire table in the following way:

Th, td (border: 1px solid grey;)

The outer border of a table can be highlighted by giving it an increased width:

Table (border: 3px solid grey;)

Borders can be set partially:

/* set a 3px gray outer border for the table */ table (border-top: 3px solid gray; ) /* set a 1px gray border for the table body cell */ td (border-bottom: 1px solid gray;)

You can read more about the border property.

2. How to set the width and height of the table

Default table width and height determined by the contents of its cells. If the width is not set, then it will be equal to the width of the widest row (line).

Table and column widths set using width properties. If the table is set to table (width: 100%;) , then the width of the table will be equal to the width of the container block in which it is located.

The width of the table and columns is usually set in px or % , for example:

Table (width: 600px;) th (width: 20%;) td:first-child (width: 30%;)

Table height not set. row height tables can be manipulated by adding top and bottom padding to elements and . Fixing the height with the height property is not recommended.

Th, td (padding: 10px 15px;)

3. How to set the table background

Default table background and cells transparent. If the page or block containing the table has a background, it will show through the table. If the background is set both for the table and for the cells, then in the places where the background of the table and cells overlap, only the background of the cells will be visible. The background for the table as a whole and its cells can be:
filling ,
,
.

4. Table columns

Model CSS tables focused mainly on rows (rows) formed using the tag

. In practice, there are times when it is necessary special formatting columns, which is possible in the following ways:

using the tag

You can set the background for any number of columns;

using the selector table td:first-child , table td:last-child , you can set styles for the first or last column of the table (except for the first cell of the table header);

using the table selector td:nth-child (column selection rule) you can set styles for any columns of the table.

You can read more about CSS selectors.

5. How to add a title to a table

You can add a header to a table using the tag , and using the caption-side property, it can be placed before or below the table. To horizontally align the title text, use text-align property. Inherited.

...

Table No. 1

company	Q1	Q2	Q3	Q4

caption ( caption-side: bottom; text-align: right; padding: 10px 0; font-size: 14px; ) Rice. 2. An example of displaying the title under the table

6. How to remove the gap between cell frames

Table cell borders are separated by a small gap by default. If you set border-collapse: collapse for the table, then the gap will be removed. The property is inherited.

Syntax

Table (border-collapse: collapse;)
Rice. 3. An example of tables with merging and split cell borders

7. How to increase the spacing between cell borders

By using border properties-spacing can change the spacing between cell borders. This property applies to the table as a whole. Inherited.

Syntax

Table (border-collapse: separate; border-spacing: 10px 20px;) table (border-collapse: separate; border-spacing: 10px;) Rice. 4. An example of tables with increased gaps between cell frames

8. How to hide empty table cells

The empty-cells property hides or shows empty cells. Affects only cells that do not contain any content. If the cell is set to a background and the table is set to table (border-collapse: collapse;) , then the cell will not be hidden. Inherited.

company	Q1	Q2	Q3
Microsoft	20.3	30.5
Google	50.2	40.63	45.23

table ( border: 1px solid #69c; border-collapse: separate; empty-cells: hide; ) th, td (border: 2px solid #69c;) Rice. 5. An example of hiding an empty table cell

9. Table layout layout with the table-layout property

The layout of a table layout is determined by one of two approaches: fixed layout or automatic layout. Under layout in this case it is implied how the width of the table is distributed between the width of the cells. The property is not inherited.

Syntax

Table (table-layout: fixed;)

10. Best Table Layouts

1. Horizontal minimalism

Horizontal tables are tables whose text reads horizontally. Each entity is a separate line. You can style these tables in a minimalist style by placing a two-pixel border under the th heading.

employee	Salary	Bonus	Supervisor
Stephen C. Cox	$300	$50	Bob
Josephine Tan	$150	-	Annie
Joyce Ming	$200	$35	Andy
James A. Pentel	$175	$25	Annie

table ( font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 14px; background: white; max-width: 70%; width: 70%; border-collapse: collapse; text -align: left; ) th ( font-weight: normal; color: #039; border-bottom: 2px solid #6678b1; padding: 10px 8px; ) td ( color: #669; padding: 9px 8px; transition: .3s linear; ) tr:hover td (color: #6699ff;)

At in large numbers rows this table design makes them difficult to read. To solve this problem, you can add a one-pixel border below all td elements.

Td ( border-bottom: 1px solid #ccc; color: #669; padding: 9px 8px; transition: .3s linear; )/*other code as above*/

Adding a :hover effect to the tr element will make it easier to read minimalist tables. When you hover over a cell with the mouse, the rest of the cells in the same row are selected at the same time, making it easier to keep track of information if tables have multiple columns.

Th ( font-weight: normal; color: #039; padding: 10px 15px; ) td ( color: #669; border-top: 1px solid #e8edff; padding: 10px 15px; ) tr:hover td (background: #e8edff ;)

2. Vertical minimalism

Although such tables are rarely used, vertically oriented tables are nevertheless useful for categorizing or comparing descriptions of the objects represented by a column. You can style them in a minimalist style by adding a space to separate the columns.

Th ( font-weight: normal; border-bottom: 2px solid #6678b1; border-right: 30px solid #fff; border-left: 30px solid #fff; color: #039; padding: 8px 2px; ) td ( border- right: 30px solid #fff; border-left: 30px solid #fff; color: #669; padding: 12px 2px; )

3. "Boxed" style

The most reliable style for designing tables of all types is the so-called "boxed" style. It is enough to choose a good color scheme, and then set the background color for all cells. Don't forget to emphasize the difference between the lines by setting the boundaries as the delimiter.

Th ( font-size: 13px; font-weight: normal; background: #b9c9fe; border-top: 4px solid #aabcfe; border-bottom: 1px solid #fff; color: #039; padding: 8px; ) td ( background : #e8edff; border-bottom: 1px solid #fff; color: #669; border-top: 1px solid transparent; padding: 8px; ) tr:hover td (background: #ccddff;)

The most difficult thing is to find the right color scheme that will blend harmoniously with your site. If the site is loaded with graphics and design, then it will be quite difficult for you to use this style.

Table ( font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 14px; max-width: 70%; width: 70%; text-align: center; border-collapse: collapse ; border-top: 7px solid #9baff1; border-bottom: 7px solid #9baff1; ) th ( font-size: 13px; font-weight: normal; background: #e8edff; border-right: 1px solid #9baff1; border- left: 1px solid #9baff1; color: #039; padding: 8px; ) td ( background: #e8edff; border-right: 1px solid #aabcfe; border-left: 1px solid #aabcfe; color: #669; padding: 8px ; )

4. Horizontal zebra

Zebra-table looks quite attractive and comfortable. The optional background color can serve as a visual cue for people to read the table.

Th ( font-weight: normal; color: #039; padding: 10px 15px; ) td ( color: #669; border-top: 1px solid #e8edff; padding: 10px 15px; ) tr:nth-child(2n) ( background: #e8edff;)

5. Newspaper style

To achieve the so-called newspaper effect, you can apply borders to the table elements and play with the cells inside. A light, minimalistic newspaper style might look like this: play with colors, add borders, padding, different backgrounds, and the :hover effect when hovering over the row.

Table (border: 1px solid #69c;) th ( font-weight: normal; color: #039; border-bottom: 1px dashed #69c; padding: 12px 17px; ) td ( color: #669; padding: 7px 17px; ) tr:hover td (background: #ccddff;)

Table (border: 1px solid #69c;) th ( font-weight: normal; color: #039; padding: 10px; ) td ( color: #669; border-top: 1px dashed #fff; padding: 10px; background: #ccddff; ) tr:hover td (background: #99bcff;)

Table (border: 1px solid #6cf;) th ( font-weight: normal; font-size: 13px; color: #039; text-transform: uppercase; border-right: 1px solid #0865c2; border-top: 1px solid #0865c2; border-left: 1px solid #0865c2; border-bottom: 1px solid #fff; padding: 20px; ) td ( color: #669; border-right: 1px dashed #6cf; padding: 10px 20px; )

6. Table background

If you are looking for a fast and unique way table layout, select attractive image or photo related to the theme of the table and set it as the background of the table.

Jpg") no-repeat; background-position: 100% 55px; ) th ( font-weight: normal; color: #339; padding: 10px 12px; ) td ( background: url("https://website/images/ back..png"); background: transparent; )

This lecture takes a detailed look at how tables are used in HTML markup. This is a tabular organization of the text, and a tabular coordinate grid, and graphics organized into tables.

Means of describing tables in HTML

As WWW development it became clear that the tools that are embedded in the HTML are not enough for high-quality display various types documents. The disadvantage of HTML was the lack of table display facilities in its composition. For this purpose, preformatted text (the tag

), in which the table was outlined with ASCII characters.  But this form of table presentation was not enough High Quality and got out of the general style of the document.  With the introduction of tables in HTML, Webmasters now have not just a tool for placing text and numbers, but a powerful design tool for placing them in right place screen of graphics and text.

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, 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.  Each cell containing text or image must be surrounded by tags<ТD>.  Number of tags<ТD>in a row specifies the number of cells

 

 
Table
 
 

 

 
If the table has two TR tags, then it has two rows.
 
 

 
If there are three in a line tag TD,
 
then in it
 
three columns.
 
 
 


 
Table column headers - tag<ТН>
Headings for columns and rows of a table are set using the heading tag<ТН>(Table Header, table header).  These tags are like<ТD>.  The difference is that the text enclosed between the tags<ТН>, is automatically written in bold and is positioned in the middle of the cell by default.  You can undo centering and align text to the left or right.  If you use<ТD>with tag<В>and attribute<АLIGN=center>, the text will also look like a heading.  However, keep in mind that not all browsers support in tables bold font, so it's better to set the table headers with<ТН>.

 

 

 

 
Title is centered by default
 
Header can span columns
 
 

 
Header can be placed before 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 allows you to create table headers.  By default, headings are centered and placed either above (<САРТION АLIGN=top>), or under the table (<САРТION ALIGN=bottom>).  The title can consist of any text and images.  The text will be split into lines corresponding to the width of the table.  sometimes tag<САРТION>used to caption the figure.  To do this, it suffices to describe a table without borders.

 

 

 
Title above the table
 

 
Text or data
 
Text or data
 
Text or data
 
Text or data
 
 
 

 
Title under the table
 

 
Text or data
 
Text or data
 
Text or data
 
 


NOWRAP attribute
Usually, any text that does not fit in one line of a table cell goes to next line.  However, when using the NOWRAP attribute with tags<ТН>or<ТD>the cell length is expanded so that the text contained in it fits on one line.
COLSPAN attribute
tags<ТD>and<ТН>are modified using the COLSPAN (Column Span) attribute.  If you want to make any cell wider than the top or bottom one, you can use the COLSPAN attribute to stretch it over any number of normal 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 normal cells.
 
 
 


ROWSPAN attribute
ROWSPAN attribute used in tags<ТD>and<ТН>, is similar to the COLSPAN= attribute, except that it specifies the number of lines the cell will span.  If you specify a number greater than one in the ROWSPAN=s attribute, then the corresponding number of rows must be below the stretched cell.  It cannot be placed at the bottom of the table.
WIDTH attribute
The WIDTH attribute has two uses.  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.  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 250 pixel wide table regardless of the screen size of the page.  When setting WIDTH=50% in the tag<ТАВLЕ>the table will take half the width of the page at any size of the image 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 might look a bit odd.  If you are using pixels and the table is wider than the viewport, a scroll bar will appear at the bottom to move left and right across the page.  Depending on the tasks at hand, either way of setting the table width can be useful.

 

 

 

 
Text or data - 100% width
 
 
 or 

 

 

 
Text or data - 50% width
 
 
 or 

 

 

 
Text or data - 200 px wide
 
 
 or 

 

 

 
Text or data - 100 px wide
 
 


Applying empty cells
If a cell contains no data, it will not have 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 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 received cells.  This tool can be useful when placing text and graphics on a page.
CELLRADDING attribute
This attribute specifies the width of the empty space between the contents of the cell and its borders, that is, 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 with ALIGN attributes and VALIGN. ALIGN attribute defines the horizontal alignment of text and graphics, i.e. left, right, or centered. Horizontal alignment can be specified in several ways:
ALIGN=bleedleft pushes 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 center the contents of the cell.
ALIGN=right Aligns the contents of the 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
 
 


The VALIGN attribute aligns text and graphics within 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 aligns text and graphics within a cell vertically.
 
top,
 
mid,
 
bottom.
 
 

 
VALIGN=top Aligns the contents of the cell to its top border.
 
top,
 
top,
 
top.
 
 

 
VALIGN=middle Centers the contents of the cell vertically.
 
mid,
 
mid,
 
middle.
 
 

 
VALIGN=bottom Aligns the contents of the cell to its bottom border.
 
bottom,
 
bottom,
 
bottom.
 
 
 


BORDER attribute
In tag<ТАВLЕ>often determine how the borders, that is, the lines that surround the cells of the table and the table itself, will look.  If you do not set a frame, you will get a table without lines, but the space for them will be allotted.  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.  You can set exclusively bold borders to draw attention to a picture or text.  When creating nested tables, you have to do for different tables borders of different thickness to make them easier to distinguish.
CELLSPACING attribute
The CELLSPACING attribute specifies the spacing between cells in pixels.  If this attribute is not specified, the default value is two pixels.  With the CELLSPACING= attribute, you can place text and graphics wherever you want.  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 applied with, the background color can be set for the entire table, for a row, or for a single cell.  Meaning given attribute is an 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 sets the background image for tables.  Applicable 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
Tables are good because, if desired, you can make their borders invisible.  This allows using the tag<ТАВLЕ>beautifully place text and graphics on the page.  Bye tag<ТАВLЕ>remains the only powerful formatter in HTML.  Web page designers now have almost the same freedom regarding the use of "white space" as creators. printed pages.  Tables are the best way to move away from the hierarchical arrangement of text on Web pages.
If the browser supports tables, it will usually display the most interesting effects obtained with their help

 

 

 

 

 

 
Ural State Pedagogical University
 
Welcome!
 

 

 
Training course"Fundamentals of WEB-mastering"
 
 
 
 
 
 


 
Creating colorful tables
Some browsers allow colors to be displayed.  There are several ways to colorize 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 page background.  Then set the background color of the page.  As a result, your tag<ВОDY>will look something like this:

 
You have created a double background - GIF and set 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, colored lines and table borders will stand out prominently.  If the background GIF is not too complicated, the page load time will increase only slightly.
Became popular, web designers mainly used the tabular layout method and got a very good result.

Tags used to build a table in html
table - required tag, which opens and closes the table 
caption - optional tag, denoting the title of the table 
th- an optional tag, in the opening and closing tags of which the name of the column fits.  Usually in bold 
tr- obligatory tag from which the line is opened and closed 
td- a required tag denoting the opening and closing of a cell in a row 

Simple table code example
 

 

 

 



 



 

 

 


 


 
 
 
Table name
 
 
Column 1 

 
 
 
Stobets 2 

 
 
 
 
 
 
Text in first cell 

 
 
 
Text in second cell 

 
 
 
 
 




 
The browser will display

Assigning tables in html
The lesson on tables is very important!  Thanks to tables, you can arrange not only text, but also images, links, and much more.  The table can be set background(or its color), indent, width, border and other options which will give it a nice look.  Table - Your first step to understand web design!  Previously, many sites were completely laid out as tables, that is, everything that the user saw (side menu, Top Menu, content) - was the content of the large table cells. 
On that note, let's move on to the attributes that make a table beautiful... 
Properties and parameters of html tables: padding, width, background color, border (frame)
At table tag has the following attributes: 
width- table width.  can be in pixels or % of screen width. 
bgcolor- background color of table cells 
background- fills the background of the table with a pattern 
border- frame and borders in the table.  Thickness is specified in pixels 
cell padding- padding in pixels between the contents of the cell and its inner border
As before, the attribute value is written in quotation marks.
 
Consider the use of these attributes on an example.  To do this, create a table (but already without the rarely used caption and th tags) and set the attribute parameter border (border), width (width of table, row or cell) and bgcolor (cell color)
 

 

 

 



 


 


 


 





 
As a result, the following table will be displayed in the browser 

frame- an attribute denoting a frame around the table.  There are the following values:
Void- no frame,
above - only the top frame, 
below - only the bottom frame, 
hsides - top and bottom frames only, 
vsides - left and right borders only, 
lhs - left frame only, 
rhs - right frame only, 
box - all four parts of the frame.
rules- an attribute denoting the borders within the table, between cells.  There are the following values:
None - there are no borders between cells, 
groups - borders only between row groups and column groups (will be discussed a little later), 
rows - borders between rows only, 
cols - borders between columns only, 
all - show all borders.
Consider code example
 

 

 

 


 
  
 
 
Column 1 

 
 
 
Stobets 2 

 
 
 
 
 
 



 
 


 
 
 
 

 


 


 


 





 
Result
Now let's try to create a beautiful table.  To do this, let's start using table alignment.  To do this, there are the following already familiar parameters:
align- table alignment.  It can be placed on the left (left), right (right), center (center) 
cellspacing- distance between table cells.  Specified in pixels (default 0 pixels) 
cell padding- padding in pixels between the contents of the cell and its inner border (default 0 pixels)
Consider an example
 

 

 

 


 
  
 
 
Column 1 

 
 

Stobets 2 

 
 
 
 
 
 

Text in the first cell of the first column 

 
 
Text in the second cell of the second column 

 
 
 
 


 


 


 


 





 
The browser will display a center-aligned table that looks like this:
tr rows and td cells in HTML tables
Let me remind you again that tables are formed line by line (tr).  The rows (tr) already contain cells (td).  If you set a parameter for a string (tr), then it will be valid for all cells(td) in this line, if for a specific cell, then only for it.  In the examples above, I specified the color for the row, this parameter was distributed accordingly for all cells. 
 



 


For tr and td tags there are the following
align- text alignment inside the cell.  Left (left), right (right), center (center) 
valign- alignment of the text inside the cell vertically.  Up (top), down (bottom), center (middle) 
bgcolor- sets the line color 
width- column width (all cells below will accept given parameter) is specified in pixels or as a percentage, where 100% is the width of the entire table 
height- cell height (all cells in the row will accept this parameter)
Consider the code where the contents of the cells (td) are aligned on different edges: in the first one on the left, in the second one on the right:
 

 

 

 


 
 
 
 
Column 1 

 
 
 
Stobets 2 

 
 
 
 
 
 

Text in the first cell of the first column 

 
 
Text in the second cell of the second column 

 
 
 
 
 

 
 
Column 1 

 
 
 
Stobets 2 

 
 
 
 


 


 


 


 





 
Result 

With the help of tables, you can make up a very good page.  Do not forget that you can insert not only text into cells, but also images, links, and more!)
Thank you for your attention!  I hope the material was helpful!
HTML tables organize and display data using rows or columns.  Tables are made up of cells that are formed when rows and columns intersect. Table cells can contain any HTML elements such as headings, lists, text, images, form elements, and other tables.  Each table can have a header associated with it, placed before or after the table.
Tables are no longer used for web page layout and layout individual elements, because such a technique does not provide the flexibility of the structure and adaptability of the site, significantly increasing the HTML markup.
For all elements of the table are available, as well as their own attributes.
Creating tables in HTML
Content:
1. How to create a table
The table is created using paired tag
 Fig.1. Appearance tables without css formatting 
By default, the table and cells do not have visible borders. Borders are set using the border property:
/* 1px gray outer table borders */ table (border: 1px solid gray;) /* table first row cell borders */ th (border: 1px solid gray;) /* table body cell borders */ td (border:  1px solid grey;)
Spacing between table cells are removed using the table property (border-collapse: collapse;) .
Width A table defaults to the width of its inner content.  To set the width, you need to set a value for the width property:
/* make the table's width equal to the width of the container block it's in */ table (width: 100%;) /* set fixed width for table */ table (width: 600px;)
If table cells are set padding and borders, then the width of the table will include the following values: 
padding-left and padding-right , the width of the border-left plus the width of the border-right of the last cell in the row.  If cell width and borders are specified, then the table width will be the sum of the cell widths plus the border-left width and border-right width of the last cell in the row.
2. How to create table rows (rows)
Table rows or rows are created using the tag
.  The number of horizontal rows in the table is determined by the number of paired tags .
3. How to make a table column header cell
4. How to make a table body cell
, located in the same row, determine the number of cells in the row of the table.  Number of cell pairs and to specify each part of the table. 
The element must be used in the following order: as child element
 
 
 
 
Column 1 

 
 
 
Stobets 2 

 
 
 
 
 
 

Text in the first cell of the first column 

 
 
Text in the second cell of the second column 

 
 
 
 





creates a column heading - a special cell, the text in which is highlighted in bold.  The number of header cells is determined by the number of tag pairs

  
creates table cells that contain table data.  Paired tags

must be equal to the number of pairs of cells
.  The colspan , rowspan , headers attributes are available for the element. 
5. How to add a caption (title) to a table
Creates a table caption.  Added directly after the tag
6. Grouping table rows and columns
Creates a structural group of columns, highlighting logically homogeneous cells.  Groups one or more columns for uniform formatting, allowing styles to be applied to columns instead of repeating styles for every cell and every row.  Added directly after tags Rice.  2. Highlighting table columns in a different color using tags and
7. Grouping table sections
The element creates a group of headings for table rows in order to set a uniform design.  Used in combination with elements
 
, after and, and before  ,
 and elements.  Can only be used once within the same table.groups the main contents of a table.  Used in combination with elements and .
Creates a group of rows to represent information about amounts or totals, located at the bottom of the table.  Used in the table once.  Placed after the tag, before the tags
and  .
 
This grouping of rows was incorporated into the standard in the expectation that browsers, when displaying long tables, would scroll the data rows while keeping the superhead and subheading stationary, and when they were output to the printer, they would be able to use the superhead and subhead as page headers.  However, modern browsers do not do this and either simply display and as lines of data, or, in best case, simply put the corresponding rows at the beginning and end of the table. 
8. How to merge table cells
The colspan and rowspan attributes join table cells.  The colspan attribute specifies the number of cells merged horizontally, and the rowspan attribute specifies the number of cells merged vertically.

Rice.  3. An example of combining table cells horizontally using the colspan attribute 
9. Attributes of table elements
Table 1. Table element attributes 

Accepted values: list of cell names separated by spaces;  these names must be assigned to the cells via their id attribute.
Accepted values: any positive integer.
Attribute
Description, accepted value
colspan
The number of cells in a row to merge horizontally. 

 
 

headers
Specifies a list of header cells containing header information for the current data cell.  Designed for speech browsers. 

 
...
...
 
row span
The number of cells in the column to merge vertically. 

 
 
Possible values: number from 1 to 999.
span
Number of columns combined for a job uniform style, default is 1. 

 
 
10. An example of creating a table
 
Rice.  4. Create a restaurant menu with an HTML table 
HTML markup

 

 
Romashka restaurant menu
 

 
Kitchen
 
cold dishes
 
Hot dishes
 
desserts
 
 

 
Salads
 
Snacks
 
First meal
 
Main dishes
 
 

 
Russian
 
The vinaigrette
 
Tongue with horseradish
 
Shchi with sauerkraut
 
Potato dumplings
 
Baked apples with honey
 
 

 
Russian salad
 
Beef jelly
 
Rassolnik home
 
Carp baked in sour cream
 
pancake pie
 
 

 
Herring under the "fur coat"
 
Jellied pike perch
 
Meat hodgepodge
 
Cutlets "Pozharsky"
 
Cake "Potato"
 
 

 
Spanish
 
Ceviche of scallops
 
Empanadas
 
Bread soup with garlic
 
Paella with seafood
 
Churros
 
 

 
Avocado and tuna timbale
 
Ahotomate
 
Asturian fabada
 
Pork Raxo
 
Almoishavena
 
 

 
Beans with ham
 
Chanfine
 
Fish soup with semolina dumplings
 
potato tortilla
 
Bunuelos
 
 

 
french
 
Vosges salad
 
Chicken Riyette
 
Eggplant cream soup "Renoir"
 
Potato ograten
 
brioche
 
 

 
Salad "Panzanella"
 
Delicious cheese
 
french pumpkin soup
 
Gratin from poultry
 
Ligurian Lemon Pie
 
 

 
Tartarus
 
marinated salmon
 
Soup "Conti"
 
Tartiflette
 
Savarin "Triumph"
 
 

AT this section some specific features of individual browsers are considered, as well as individual subtleties building and displaying tables.
Displaying empty cells in HTML tables
One of the features of the presentation of HTML tables different browsers is to display empty cells.  According to the description HTML language all browsers must pad rows with blank cells if any row has a smaller number of cells than other rows.  In addition, there can be cells anywhere in the table that do not contain data.
There is a difference between empty cells and cells containing invisible data.  In empty cells inside a pair of tags and contains no information or one or more spaces that are not treated as data.  Cells containing invisible data, for example, may contain code or line feed code 
, or any text whose color matches the background color of the cell.  If cells containing data (even invisible ones) are displayed in the same way by all browsers, then empty cells will be displayed differently.  The Netscape browser does not show an empty cell, i.e. the place where given cell, will be filled with the background color of the page, not the background color of the cell, unlike cells that contain data.  No border is drawn around empty cells. HTML example tables with an empty cell is shown in fig.  4.15.
Rice.  4.15. empty HTML cell tables are rendered differently by different browsers
Microsoft Internet Explorer both those and other cells displays the background color of the cells.  A browser such as NSCA Mosaic allows the user to determine the nature of the issuance of empty cells in the table by selecting the appropriate options.  Knowledge of such features will allow you to develop tables that will be displayed appropriately, regardless of the browser selected by the user.  In some cases, it is enough to create cells containing a single code instead of some empty cells.