Table borders. Using the cellspacing attribute

We have looked at many methods for styling elements on a page such as text information, links, images, headings, but all this is not enough yet. In my articles, I often use HTML elements such as tables, because in most cases they help to systematize important information and make its presentation simpler.

In this article, I'll introduce you to the intricacies of styling HTML tables, and you'll learn new CSS properties designed to achieve these goals.

The hypertext markup language HTML has provided us with a large number of possibilities to implement binding CSS styles to ten unique tags designed to work with tables, I suggest repeating them before further study:

(“footer” of the table) background color – coral, for element (“table header”) set the background color silver.

For elements

, which are inside the element (table body) set the background color to change on hover (pseudo class :hover) c white per color khaki(the entire line is highlighted).

The result of our example:

Rice. 153 Example of styling rows in tables

The following example looks at applying corner rounding to table cells (property).

) we set the bottom padding to 19 pixels. I hope the uneven numbers don't bother you :)

The result of our example:

Space between cells

After the example discussed above, you may have noticed that we still have a gap between all the table cells. Let's look at how to remove the space between table cells or increase it.

To set the distance between the borders of adjacent cells, you must use the CSS property border-spacing.

border-spacing: 30px 10px;

1	2	3
2
3

border-spacing: 0;

1	2	3
2
3

border-spacing:0.2em;

1	2	3
2
3

In this example we:

• float: left). If you missed the topic of floating elements, then you can always return to it in this tutorial - "".
• In addition, we set the right margin for the tables to 30px and set the vertical alignment of the tables (the top of the element is aligned with the top of the tallest element). We will return to a detailed discussion of this property in this article.

) – bold style.

For the table cells (header and data cells), we set a 1px solid border with #F50 hex color and set 19px padding on all sides.

For the first table with class .first we set the space between the table cells (border-spacing property) to be 30px 10px for the second table with the class .second equal to zero, for third tables with class .third equal to 0.2em .

Please note that if only one length value is specified in the border-spacing property, then it indicates the intervals, both horizontally and vertically, and if two length values ​​are specified, then the first determines the horizontal distance, and the second vertical. The distance between the borders of adjacent cells can be specified in CSS units (px, cm, em, etc.). Negative values ​​are not allowed.

The result of our example:

Show borders around table cells

You can say: - so, we removed the space between the cells using the border-spacing property with a value of 0 , but why do our cell borders now intersect?

Double borders are caused by the fact that the bottom border of one cell is added to the top border of the cell that is below it, a similar situation occurs on the sides of cells and this is logical from a table display point of view, but fortunately there is a way to tell the browser that we We don’t want to see such loose behavior of cell borders.

To do this you need to use CSS properties about border-collapse . It may not be strange, but using the border-collapse property with the collapse value is the best way How can you remove the space between cells without getting double borders between them?

Let's compare the behavior of borders when using the border-spacing property with a value of 0 and the border-collapse property with a value of collapse :

border-spacing: 0;

1	2	3
2
3

border-collapse: collapse;

1	2	3
2
3

In this example we:

• We made our tables floating and moved them to the left (float: left), set their outer margin on the right to 30px.
• Set the table name (tag

) – bold style.

For the table cells (header and data cells), we set a 5px solid border with hex color #F50 and set a fixed width of 50px and height of 75px.

For the first table with class .first we set the space between the table cells to zero (border-spacing : 0 ;), and for the second table with the class .second set the border-collapse property to collapse , which collapses the borders of cells into one when possible.

The result of our example:

Behavior of empty cells

You can use CSS to set whether the borders and backgrounds of empty cells in a table should be displayed or not. This behavior is controlled by the empty-cells property, which by default, as you may have noticed from the previous examples, displays empty cells.

Let's move on to an example:

empty-cells: show;

1	2	3
2		☺
3	☺

empty-cells: hide;

1	2	3
2		☺
3	☺

To understand how the empty-cells property works from this example is very simple, if it is set to hide , then empty cells and the background in them will be hidden, if set to show (default), then they will be displayed.

Table header location

Let's look at another simple property for styling tables - caption-side , which sets the position of the table header (above or below the table). By default, the caption-side property is set to top , which places the caption above the table. In order to place a title under the table, you need to use the property with the value bottom .

Let's look at an example of using this property:

Header above table

Name	Price
Fish	350 rubles
Meat	250 rubles

Heading below the table

Name	Price
Fish	350 rubles
Meat	250 rubles

In this example we created two classes, which control the position of the table header. First grade ( .topCaption) puts the table title above it, we applied it to the first table, and the second class ( .bottomCaption) places the table title below it, we applied it to the second table. Class .topCaption has the default caption-side property value and is created for demonstration purposes.

The result of our example:

Horizontal and vertical alignment

In most cases, when working with tables, you will need to adjust the alignment of content within header and data cells. The text-align property is used for horizontal alignment, similar to any text information. We discussed the use of this property for text earlier in the article “”.

To set the alignment for content in cells, you must use special keywords with the text-align property. Let's consider the application keywords this property in the following example.

Meaning	Description
left	Aligns cell text to the left. This is the default value (if the text direction is left to right).
right	Aligns cell text to the right. This is the default value (if the text direction is right to left).
center	Aligns cell text to the center.
justify	Stretches the lines so that each line is the same width (stretches the cell's text to fit its width).

In this example we created four classes, which specify different horizontal alignments in cells and apply them in order to the rows of the table. The value in the cell corresponds to the value of the text-align property

The result of our example:

In addition to horizontal alignment, you can also define vertical alignment in table cells using the vertical-align property.

Please note that when working with table cells, only the following values ​​* of this property are applied:

* - Sub , super , text-top , text-bottom , length and % values ​​applied to a table cell will behave as if using the baseline value.

Let's look at an example of use:

Meaning	Description
baseline	Aligns the cell's baseline with the parent's baseline. This is the default value.
top	Aligns the contents of a cell vertically to the top edge.
middle	Aligns the contents of a cell vertically in the middle.
bottom	Aligns the contents of a cell vertically along the bottom edge.

In this example we created four classes, which specify different vertical alignments in cells and apply them in order to the rows of the table. The value in the cell corresponds to the value of the vertical-align property that was applied to that row.

Algorithm for placing a table layout in the browser

CSS by default uses an algorithm for the browser to automatically arrange the table layout. In this case column width is set by the widest non-breaking content of the cell. This algorithm can be slow in some cases since the browser must read all the content in the table before determining its final layout.

To change the browser's table layout type with automatic on fixed, you must use the CSS property table-layout with the value fixed .

In this case, horizontal placement depends only on the width of the table and the width of the columns, and not on the contents of the cells. The browser starts displaying the table immediately after the first row is received. As a result, a fixed algorithm allows you to create a layout for such a table faster than using the automatic option. When working with large tables, you can use a fixed algorithm to improve performance.

Let's look at the use of this property using the following example:

table-layout: auto;

Name	2009	2010	2011	2012	2013	2014	2015	2016
Wheat	125	215	2540	33287	695878	1222222	125840000	125

table-layout: fixed;

Name	2009	2010	2011	2012	2013	2014	2015	2016
Wheat	125	215	2540	33287	695878	1222222	125840000	125

In this example we:

Styling table rows and columns

We have already partially touched on methods for styling table rows and columns in the article “”. In this article, we looked at using the group pseudo-class, which allows you to alternate row styles in tables using values even (honest) And odd (odd), or by elementary mathematical formula.

Let's review the techniques we covered earlier and explore new ways to style rows and columns in tables. Let's move on to examples.

1	2	3	4	5	6	7	8	9	10	11	12	13	14
2
3
4

In this example we:

The result of our example:

Let's move on to the next example, in which we will look at options for styling table rows.

Service	Price
Sum	15 000
1	1 000
2	2 000
3	3 000
4	4 000
5	5 000

In this example we:

• We set the width of the table to 100% of the width of the parent element, and set a solid border of 1px width for the header and data cells.
• Set for element

Tag	Description
. Defines the contents of the table. Defines the name of the table. Defines the header cell of the table. Defines a table row. Defines a table data cell. Used to contain the group header in the table (table header). Used to contain the "body" of the table. Used to contain the “footer” of the table. Defines specified column properties for each column within a tag Defines a group of columns in a table. Working with table indents Table indentation 1 2 3 4 2 3 4 IN in this example We: We placed the table in the center using the technique of horizontal centering with external indents (margin: 0 auto). For the table name (tag

1	2	3	4	5

In this example we:

• We centered the table with outer margins, set the width and height of the header cells to 50px, and specified transparent border 5 pixels.
• We established that when hovering (pseudo-class :hover) on the header cell, it receives a background blue colors, orange text color, border orange colors 5 pixels and rounding radius 100%.
• transparent border is necessary in order to reserve space for the border, which will be displayed when hovering; if this is not done, the table will “jump”.

The result of our example:

The following example covers the use of HTML elements And and their stylization.

Application No.	Service	price, rub.	Total
1	Singing	6 000	6 000
2	the washing up	2 000	2 000
3	Cleaning	1 000	1 000
4	Nagging	1 500	1 500
5	Reading	3 000	3 000

In this example we:

The result of our example:

Well, the final example, which is quite difficult to understand and requires advanced knowledge in CSS, as it touches on future topics planned for detailed study in this course.

In the previous example, we realized that HTML element You can only apply one CSS property – the background color (background-color), but you cannot directly set the background color when hovering (the :hover pseudo-class) on this element. In this example, we'll look at how to highlight a table column using only CSS.

Application No.	Service	price, rub.	Total
1	Singing	6 000	6 000
2	the washing up	2 000	2 000
3	Cleaning	1 000	1 000
4	Nagging	1 500	1 500
5	Reading	3 000	3 000

In this example we:

• We set our table to occupy 100% of the parent element, the table cells to occupy 25% of the parent element and have a solid 1 pixel green border, the height of the header and data cells is 45px. We removed the space between the cells using the border-collapse property with the value .
• And so, using the pseudo-element ::after we add content after each element on hover. The ::after pseudo-element is required to be used in conjunction with the content property, thanks to which we insert a block element that has a background color forestgreen and has absolute positioning.
• Absolute positioning here is necessary to offset the element relative to the specified edge of its ancestor, and the ancestor must have a position value other than the default - static , otherwise the counting will be relative to the specified edge of the browser window, for this reason we set for the table relative positioning(relative).
• We set the top property for our generated block, which specifies the direction in which the positioned element is offset from the top edge, and the bottom property, which specifies the direction in which the positioned element is offset from the bottom edge. For both properties, the value 0 was specified, so the block will completely occupy the element from the bottom and top of the table, the width of this block was set to 25%, this value corresponds to the width of the cell itself.
• And the final property that we set for this block: z-index with a value of "-1" it determines the order of the positioned elements according to Z axis. This property is necessary for the text to be in front of this block, and not behind it; if you do not set a value less than zero, the block will cover the text.

The result of our example:

If at this stage of your study you do not understand the process of positioning elements, then do not be discouraged; this is a difficult topic to understand, which we also did not consider, but we will definitely consider it in the next article of the textbook “Positioning elements in CSS”.

Questions and tasks on the topic

Before moving on to the next topic, complete the practice assignment:

If you have difficulty completing the practice task, you can always open the example in a separate window and inspect the page to understand what CSS code was used.

2016-2020 Denis Bolshakov, you can send comments and suggestions on the site to [email protected]

The CSS specification gives unlimited possibilities for designing tables. By default, the table and table cells have no visible borders or background, and cells within the table are not adjacent to each other.

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

Formatting tables

1. Table borders

By default, the table and the cells inside it are displayed in the browser without visible borders. Table Borders are specified by the border property:

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

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

Th (border: 1px solid grey;)

Cell Borders table bodies are specified for the td element:

Td (border: 1px solid gray;)

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

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

You can highlight the outer border of a table by giving it an increased width:

Table (border: 3px solid grey;)

Boundaries can be set partially:

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

You can read more about the border property.

2. How to set the table width and height

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

Table and column width is set using the width property. If table (width: 100%;) is specified for a table, 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 specified in px or %, for example:

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

Table height not specified. Row height tables can be manipulated by adding top and bottom padding to elements And . Fixing the height using the height property is not recommended.

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

3. How to set the table background

Default table background and cells are transparent. If the page or block containing the table has a background, it will show through the table. If the background is specified for both the table and cells, then in 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

The CSS table model is focused mainly on rows (rows) formed using the tag

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

using 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 table columns.

You can read more about CSS selectors.

5. How to add a table title

You can add a title to a table using a tag , and using the caption-side property it can be placed in front of or below the table. To horizontally align title text, use the 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. Example of displaying a header under a table

6. How to remove space between cell frames

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

Syntax

Table (border-collapse: collapse;)
Rice. 3. Example of tables with merging and separate cell frames

7. How to increase the space between cell frames

Using the border-spacing property, you can change the distance between cell frames. 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. Example of tables with increased spaces between cell frames

8. How to hide empty table cells

The empty-cells property hides or shows empty cells. Only affects cells that do not contain any content. If a cell is set to a background and a 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. Hiding example empty cell tables

9. Layout a table using the table-layout property

The table layout layout is determined by one of two approaches: fixed layout or automatic layout. In this case, layout refers to how the width of the table is distributed among the widths of the cells. The property is not inherited.

Syntax

Table (table-layout: fixed;)

10. Best Table Layouts

1. Horizontal minimalism

Horizontal tables are tables in which the text is read horizontally. Each entity is a separate row. You can give tables like this a minimalist look by placing a two-pixel border under the th header.

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;)

When there are a large number of 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; )/*the rest of the code is as in the example above*/

Adding a :hover effect to the tr element will make tables designed in a minimalist style easier to read. When you hover your mouse over a cell, the remaining cells in the same row are highlighted simultaneously, making it easier to track 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 useful for categorizing or comparing descriptions of objects represented by a column. You can design them in a minimalist style by adding 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's enough to choose a good one color scheme, and then set the background color for all cells. Don't forget to emphasize the difference between lines by setting borders as a separator.

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; border-top: 1px solid transparent; tr:hover td (background: #ccddff;)

The most difficult thing is to find the color scheme that will harmoniously match your website. If the site is heavy on 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; 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

The zebra table looks quite attractive and comfortable. Additional color The background can serve as a visual cue for people when reading 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 table elements and play with the cells inside. A light, minimalistic newspaper style might look like this: play with the color scheme, add borders, padding, different backgrounds, and a hover effect when hovering over a line.

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; )

6. Table background

If you are looking for a quick and unique way to design a table, choose an attractive image or photo that relates to the theme of the table and set it as the table background.

Png") 98% 86% no-repeat; ) th ( font-weight: normal; font-size: 14px; color: #339; padding: 10px 12px; background: white; ) td ( color: #669; border- top: 1px solid white; background: rgba(51, 51, 153, .2); tr:hover td ( background: rgba(51, 51, 153, .1); )

Tabular data- information that can be displayed in a table and logically divided into columns and rows. HTML tag is used to display tabular data on web pages

, which is a container with the contents of the table. Content HTML tables described line by line, each line starting with an opening tag and ends with a closing tag .

Inside a tag

table cells represented by tags are located

or

. It is the cells that contain all the table content displayed on the web page. Table frame By default, an HTML table on a web page is displayed without a border; to add a border to the table, like all other elements, the CSS border property is used. But it is worth paying attention to the fact that if you add a frame only to an element , then it will be displayed around the entire table. In order for the table cells to also have a border, you will need to set the border property for the elements creates new line. Further in nested And . Table, th, td ( border: 1px solid black; ) Try » Now both the table and the cells have borders, and each cell and table have their own borders. As a result, empty space appeared between the frames; the size of this space can be controlled by the border-spacing property, which is set for the entire table. In other words, you cannot control the spacing between different cells individually. Even if you remove the spaces between cells using the border-spacing property value 0, the borders of the cells will touch each other, doubling the size. To combine cell borders, use the border-collapse property. It can take two meanings: separate: is the default. Cells are displayed a short distance from each other, each cell has its own border. collapse: joins adjacent frames into one, all spaces between cells, as well as between cells and the table frame, are ignored. Name Surname Homer Simpson Marge Simpson Name Surname Homer Simpson Marge Simpson Try » Table size After adding borders to table cells, it became noticeable that the contents of the cells were too close to the edges. To add white space between the edges of cells and their contents, you can use the padding property: Th, td ( padding: 7px; ) Try » The size of a table depends on its contents, but situations often arise when the table is too narrow and it becomes necessary to stretch it. The width and height of the table can be changed using the width and height properties by specifying required sizes or the table or cells itself: Table (width: 70%; ) th (height: 50px; ) Try » Text alignment By default, text in table header cells is centered, while text in regular cells is left aligned; using the text-align property you can control the horizontal alignment of text. The vertical-align CSS property allows you to control the vertical alignment of text content. By default, text is aligned vertically to the center of cells. Vertical alignment can be overridden using one of the values ​​of the vertical-align property: top: text is aligned to the top border of the cell middle: aligns text to the center (default) bottom: text is aligned to the bottom border of the cell Name Surname Homer Simpson Marge Simpson Try » Alternate background color of table rows When viewing large tables that contain many rows with a lot of information, it can be difficult to keep track of what data belongs to a particular row. To help users find their way around, you can use two different background colors alternately. To create the effect described, you can use the class selector, adding it to every second row of the table: Name Surname Position Homer Simpson father Marge Simpson mother Bart Simpson son Lisa Simpson daughter Try » Adding a class attribute to every other line is quite tedious. The pseudo-class:nth-child was added to CSS3 to provide an alternative solution to this problem. Now the interleaving effect can be achieved solely using CSS, without resorting to changing the HTML markup of the document. Using the pseudo-class:nth-child, you can select all even or odd rows of a table using one of the keywords: even (even) or odd (odd): Tr:nth-child(odd) ( background-color: #EAF2D3; ) Try » Change row background on hover Another way to improve the readability of tabular data is to change background color line when you hover the mouse cursor over it. This will help highlight the desired content of the table and increase the visual perception of the data. Implementing such an effect is very simple; to do this, you need to add a pseudo-class:hover to the table row selector and set the desired background color: Tr:hover ( background-color: #E0E0FF; ) Try » Centering a table Centering an HTML table is only possible if the table's width is smaller than the width of its parent element. To align the table to the center, you need to use the margin property, giving it at least two values: the first value will be responsible for the outer margin of the table at the top and bottom, and the second value will be responsible for automatic alignment to the center: Table ( margin: 10px auto; ) Try » If you need different margins at the top and bottom of the table, you can set the margin property to three values: the first will be responsible for the top margin, the second for the horizontal alignment, and the third for the bottom margin: Table ( margin: 10px auto 30px; ) ="center" bgcolor ="#ff6600"> Internet Explorer for Windows, old versions (Download a pack containing Internet Explorer versions 3.0, 4.01, 5.01, 5.5, 6.0) Example page for Netscape 3.04-6.0 and Mozilla 0.6-0.92 - appearance content text and its center alignment are also created without using CSS: [Open example page] [Download in archive]. Example page for Arachne - the appearance of the content text and its center alignment were also created without using CSS: [ Open example page ] [ Download in archive ]. Also in Opera 2.12 - 3.50, but with some drawbacks. Dillo - partially. Dillo does not support attribute height For td or tr. The very technique of creating visual boundaries in tables works. With some drawback. Aliosque subditos et theme Horizontally align the image to the center with using CSS. Example: HTML/XHTML. Code: CSS. Code: .example (position: relative; left: 0px; top: 0px; height: auto; width: 100%; float: left; padding: 10px; border: 1px #ccc solid; background: #fafafa;) .example img (display: block; margin: 0 auto;) CSS properties of the container (in this case, example) can be very different; center alignment of the image is created using styles directly related to the image: .example img (display: block; margin: 0 auto;). [ 1 ] And also in Opera 4.0+, if shorthand CSS properties are not used. That is, if the CSS code is in the form .example img (display: block; margin-left: auto; margin-right: auto;). [ 2 ] And also in Netscape 6.01+, Mozilla 0.6+. [ 3 ] And also in Netscape 6.01+, Mozilla 0.6+. Rename a file in DOS with the REN command REN FILE1.TXT FILE2.TXT - Renames FILE1.TXT to FILE2.TXT REN FILE1.TXT FILE2.HTM - Renames FILE1.TXT to FILE2.HTM REN *.TXT *.HTM - Renames all files with extension .txt into files with extension .htm. Only the extensions change, the actual file names remain as they were. Since REN is short form when writing a command, RENAME can also be used instead of REN - as a more descriptive one, for example. Rename a file in DOS with the MOVE command MOVE FILE1.TXT FILE2.TXT - Renames FILE1.TXT into FILE2.TXT MOVE FILE1.TXT FILE2.HTM - Renames FILE1.TXT into FILE2.HTM Both methods of renaming files work the same in Windows console. However there is some difference: MS-DOS, other typical/old DOS's, command interpreter Windows strings up to Windows 95 and Windows NT 3.51 use short format file name entries ("8.3" format). So, for example, REN FILE1.HTM FILE1.HTML will not work, there will be an error message: "Duplicate file name or file name not found". What does not happen in the case of newer DOS's or the console is more new Windows. And when using old DOS's there may not be a problem - if the appropriate drivers are installed. [ 1 ] Tested in MS-DOS 6.0+. However, it is likely that it will work in other versions of MS-DOS or in other DOS's. the body of the table is located. The body consists of rows and columns. The table is filled in line by line. Each tag columns are created. You can create multiple columns. In this case, you need to monitor the number of columns in each row. For example, if the first row had 5 columns, then the following rows should also have 5 columns. Otherwise the table will float. It is possible to merge cells. How to make a table in html Let's give an example, html code: Example table Column 1 Column 2 Pay attention to the cell . We use the special colspan attribute to span cells horizontally. Its numeric value indicates the number of columns to be merged. There is also an analogue of this attribute: tag (table header), where you also need to enter colspan. The result will be the same. But often they use regular td. Now let's take a closer look at all the tag attributes . Tag Attributes and Properties To opening tag You can specify various attributes. 1. Property align="parameter" - sets the table alignment. Can take the following values: In the example above, we aligned the table to the center align="center" . This attribute can be applied not only to the table, but also to individual table cells . Thus, the alignment will be different in different cells. For example , , , or cols - line is displayed between columns none - all borders are hidden rows - a border is drawn between table rows created through the tag 12. Property width="number" - sets the width of the table: either in pixels or in percentages. 13. Property class="class_name" - you can specify the name of the class to which the table belongs. 14. Property style="styles" - styles can be set individually for each table. Now it's time to dive inside the table and look at the attributes of the table cells. These attributes should be written in the opening tag And The same options are available as for will be hierarchically applied to all or lines ... ... ... 2. Property background="URL" - sets the background image. Instead of the URL, the address of the background image should be written. Example Example table Column 1 Column 2 Converts to the following on the page: In the example considered, our background image is located in the img folder (which is in the same directory as the html page), and the image is called fon.gif . Please note that in the tag we added style="color:white;" . Since the background is almost black, to prevent the text from blending into the background, we made the text white. 3. Property bgcolor="color" - sets the background color of the table. You can choose any color from the entire palette (see codes and names of html colors) 4. Property border="number" - sets the thickness of the table border. In previous examples, we specified border="1" , which means the border thickness is 1 pixel. 5. Property bordercolor="color" - sets the color of the border. If border="0" then there will be no border and the border color will have no meaning. 6. Property cellpadding="number" - indent from the frame to the cell contents in pixels. 7. Property cellspacing="number" - the distance between cells in pixels. 8. Property cols="number" - the number of columns. If you do not set it, the browser itself will determine the number of columns. The only difference is that specifying this parameter will most likely speed up the loading of the table. 9. Property frame="parameter" - how to display borders around the table. Can take the following values: void - do not draw borders border - border around the table above - border along the top edge of the table below - border at the bottom of the table hsides - add only horizontal borders (top and bottom of table) vsides - draw only vertical borders (to the left and right of the table) rhs - border only on right side tables lhs - border only on the left side of the table 10. Property height="number" - sets the height of the table: either in pixels or in percentages. 11. Property rules="parameter" - where to display borders between cells. Can take the following values: all - a line is drawn around each table cell groups - a line is displayed between groups formed by tags . Attributes and Properties 1. Property align="parameter" - sets the alignment of an individual table cell. Can take the following values: left - left alignment center - center alignment right - right alignment 2. Property background="URL" - sets the background image of the cell. Instead of the URL, the address of the background image should be written. 3. Property bgcolor="color" - sets the background color of the cell. 4. Property bordercolor="color" - sets the color of the cell border. 5. Property char="letter" - specifies the letter from which the alignment should be made. The value of the align attribute must be set to char. 6. Property colspan="number" - sets the number of horizontal cells to be merged. 7. Property height="number" - sets the height of the table: either in pixels or as a percentage. 8. Property width="number" - sets the width of the table: either in pixels or as a percentage. 9. Property rowspan="number" - sets the number of vertical cells to be merged. 10. Property valign="parameter" - vertical alignment of the cell contents. top - align cell contents to the top edge of the row middle - middle alignment bottom - alignment to the bottom edge baseline - alignment to the baseline Note 1 For tag . Parameters for one tag inside him How to prevent cell borders in a table from sticking together If you use a border (cell border) and zero padding between cells, they are still stuck together and you get a double border . To avoid this, you need to specify border-collapse: collapse in the table styles: ... Dear reader, now you have learned much more about html tag table. Now I advise you to move on to the next lesson. Article rating: (No ratings yet) Loading... Share with friends: Articles on a similar topic The largest public pages on VKontakte Cook it! Samsung Galaxy A9 Star Pro: the first smartphone with a quad camera Information about the type of speakers and audio technologies supported by the device Samsung Galaxy J1 smartphone: specifications, instructions, reviews Communication between devices on mobile networks is carried out using technologies that provide different transmission speeds “Can't connect to iTunes Store” Close Find on the site For example: types of drywall