Displaying the inner borders of the css table. Borders and frames

The purpose of the lesson: Familiarity with table properties and CSS table layout principles


Let's take a look at the basic CSS table properties

border

A property is considered in one and includes several properties at the same time:

  • BORDER-STYLE
  • BORDER-WIDTH
  • BORDER-COLOR

There is also a collective rule:

table.collapse (border-collapse: collapse;) table.separate (border-collapse: separate;)

Result:

width and height
(table height and width)

Values:

Example:

text-align
(horizontal alignment)

Values:

  • center (centered)
  • left (left-aligned)
  • right (right-aligned)
  • justify (width)

vertical-align
(vertical alignment)

Values:

  • baseline (baseline)
  • sub (as subindex)
  • super (as superscript)
  • top (top)
  • middle (middle)
  • bottom (bottom edge)
  • % (of the height of the line spacing)

Example:

padding
(table padding)

background-color (background)
color (text color)

CSS table layout

Due to the large number of table properties and variations in their design, tables long time were some of the standard for layout of web pages. If you make the borders of the table invisible, then you can use its individual cells as separate blocks of the page: header, menu, footer, etc.

But this is not entirely correct, because each tag has its own purpose, and tables were not supposed to serve for page layout. However, the lack of an alternative prompted the designers to use this type of layout method.

Now there is another way - using layers, which gradually replaced tables in this kind of working with a web page. However, even nowadays, some designers successfully use table layout.

Two-column spreadsheet layout

One of the most common layout methods is two columns, i.e. the page is divided into two parts.

  • Usually the left side is the menu and additional elements, and the right side is the main one for the main content.
  • In this case, the width of the left side is set a certain value, i.e. hard, and the right side takes up the rest of the page.
  • In this case, you need to set the total width of the entire table (table tag) in percent through the width property (100%), and for the first cell (td tag) set the width (also the width property) in pixels or percent.

    • Example: set the main frame of the page in two columns: the first - with a fixed size, the second - for the rest of the browser area. Execute the task using CSS styles ()


    Performance:

    </ head> <body> <table id = "maket" cellspacing = "0"> <tr> <td id = "left"> 1</ td> <td id = "right"> 2</ td> </ tr> </ table> ...

    1
    ...

    Result:

  • Now let's try to visually separate the two columns of the table from each other.

    • Example: set a different background of cells (to separate two columns from each other) and set the distance between columns (separator)


    Performance:
    Let's add new style properties:

    / * for the left cell * / td # left (width: 200px; background: #ccc; border: 1px solid black; / * temporarily denote the borders * /) / * for the right cell * / td # right (background: # fc3; border: 1px solid black; / * temporarily denote borders * /) / * for separator * / #razdel (width: 10px; / * Spacing between columns * /)

    Together:

    </ head> <body> <table id = "maket" cellspacing = "0"> <tr> <td id = "left"> 1</ td> <td id = "razdel"> <td id = "right"> 2</ td> </ tr> </ table>

    1

    A new cell has been added for the separator.
    Result:

  • You can also make the separator between columns less prominent. To do this, we will use border styles.

    • Example: make separator between table columns using dotted line borders of adjacent cells


    Performance:
    Let's add new border properties for cells:

    / * for left cell * / td # left (width: 200px; background: #ccc; / * Left column background color * / / * new * / border-right: 1px dashed # 000; / * Right dashed border options * / )

    Together:

    </ head> <body> <table id = "maket" cellspacing = "0"> <tr> <td id = "left"> 1</ td> <td id = "right"> 2</ td> </ tr> </ table>

    1

    Result:

    Three-column spreadsheet layout

    There is a concept of a fixed or "fluid" layout.

    Fixed layout CSS

    • Using fixed layout the width of the entire table is set in pixels, and then, regardless of the resolution of the monitor and browser window, the table will always have the same width.
    • In this case the width of the remaining columns should also be fixed.
    • It is possible not to specify the width of one cell, then it will be calculated automatically based on the dimensions of the remaining cells and the entire table.

    Example: create a page template with three columns. Use fixed table layout:

    • left column - 150 pixels;
    • middle column - 400 pixels;

    Performance:

    </ head> <body> <table id = "maket" cellspacing = "0"> <tr> <td id = "left"> 1</ td> <td id = "central"> 2</ td> <td id = "right"> 3</ td> </ tr> </ table>

    1 2

    Result:

    Rubber mockup

    • Table Width when using the "rubber" design set in% of the width of the browser window... That. when the browser window changes, the size of the table also changes.
    • Width of all cells can be installed in percents.
    • The second option is when width of some cells is established in percents, a some in pixels.

    Important: The sum of the widths of all columns should be 100%, regardless of the width of the table.


    Example:

    • left column - 20%;
    • middle column - 40%;
    • right column - 40%;

    Set the background for the columns and visually separate the columns with a border.

    Performance:

    </ head> <body> <table id = "maket" cellspacing = "0"> <tr> <td id = "left"> 1</ td> <td id = "central"> 2</ td> <td id = "right"> 3</ td> </ tr> </ table>

    1 2

    Result:

    Consider the second option, when the width of the center column is automatically selected by the browser; an example is the picture:

    Example: create a page template with three columns. Use a fluid table layout:

    • left column - 150 pixels;
    • middle column - 40%;
    • right column - 200 pixels;

    Set the background for the columns and visually separate the columns with a border.


    Performance:

    </ head> <body> <table id = "maket" cellspacing = "0"> <tr> <td id = "left"> 1</ td> <td id = "central"> 2</ td> <td id = "right"> 3</ td> </ tr> </ table>

    1 2

    Result:
    The result will be approximately the same, only the "stretching" will occur due to the central column.

    Using a nested table in a fluid layout

    If the width of two columns is set in percentages and the third in pixels, you won't be able to get by with one table. So, if the width of the entire table is 100 percent, the first column is 200 pixels, and the remaining columns are 20 percent, then a simple calculation shows that the size of the first column is 60 percent. In this case, the browser will not accept the specified value in pixels, and the size will be set in percent.

    • The original table is created with two cells. Table width is set as a percentage.
    • For the left cell(first column) width is set in pixels.
    • Right cell width(base for other speakers) not specified... A second table is inserted inside this cell, also consisting of two cells.
    • The width of the cells of the nested table is set as a percentage..
    • Inner table width must be set to 100 percent so that this table takes up all the free space in the outer table.
    • Center and right column widths are calculated relative to the width of the cell, not the outer table as a whole.

    Example: create a page template with three columns. Use fluid layout with nested table:

    • left column - 150 pixels;
    • middle column - 60%;
    • right column - 40%;

    Set the background for the columns.

    Performance:

    you can apply only one CSS property, the background-color, but you cannot directly set the background color on hover (the: hover pseudo-class) on this element. In this example, we will look at how to highlight a table column using only CSS.

    An example of highlighting columns and rows of a table on hover
    1
    2

    The tag attributes cellpadding and cellspacing are required here, so that there is no "gap" between the tables.
    Result:

    So, we have studied with you the most simple actions that can be implemented with table borders. And now the table looks much more aesthetically pleasing. However, the filling of the cells directly rests on the boundaries. You can easily fix this by just indenting the cells in the HTML table. And then the text inside the frame, in the cell, will be more readable.

    In order to make indents in a cell, use the attribute cellpadding for tag

    ... However, there is another, more preferable option: CSS.

    In this case, the indents are set using the property padding... With its help, it will not be difficult to indent where necessary, that is, top, right, bottom or left, using, respectively, one of these properties: padding-top, padding-right, padding-bottom and padding-left.

    You can set how many pixels should be indented. Here's an example where the bottom margin will be 20 pixels, and all the rest will be 10 ... Such CSS-the code will look like this:

    Td (padding: 10px; padding-bottom: 20px;)

    And the complete code of styles at this stage:

    Table (border: solid 1px blue; border-collapse: collapse;) td (border: solid 1px blue; padding: 10px; padding-bottom: 20px;)

    Result in the browser:

    Indentation between cells

    Typically, tasks associated with creating tables can be solved using tags, attributes and properties that allow you to create borders, indents in cells, and also set the color background of the cells themselves.

    Indents in tables are not only inside cells. They can also be present between the cells themselves.

    There are two ways to indent between cells:

    1. using the attribute cellspacing for tag
    .
  • using CSS-properties border-spacing.

    • It must be emphasized that border-spacing is written for the table as a whole, while the property padding prescribes directly for the cells.

    Let's take a look at an example:

    Table (border: solid 1px blue; border-collapse: separate; border-spacing: 5px;) td (border: solid 1px blue; padding: 10px; padding-bottom: 20px;)

    And the resulting result:

    Let's stipulate right away that you shouldn't try to make such indents using border-collapse: collapse... Indeed, when using this option, the cells "stick" to each other.

    And to keep them separate from each other, you should use border-collapse: separate... It is important to understand that this value is the default. And it is used only in order to clearly show how this problem is being solved. If we delete this line, then the result in the form of cells located separately from each other will be saved.

    CSS allows you to set not only the border style of the table, but also the style of the borders of individual cells. Since each cell has its own borders, the border between adjacent cells is doubled. But it is possible to combine the borders of neighboring cells into one. There is a border-collapse property for this. It takes on the values:

    border-collapse: separate - each cell has its own border (default)

    border-collapse: collapse - the general border

    border-collapse: inherit - the value is taken from parent element

    For example, let's create a table and set a frame for the cells of all tables that will be on the page. First, let's not change anything to see how the table will look:

    Style:

    and and their styling.

    Example of highlighting table columns

    1
    2
    3
    4
    5
    6

    		 Page
    NameSurname
    Homerthe Simpson
    Margethe Simpson

    NameSurname
    Homerthe Simpson
    Margethe Simpson


    Try "

    Table size

    After adding frames to table cells, it became noticeable that the contents of the cells are too close to the edges. You can use the padding property to add white space between the edges of the cells and their contents:

    Th, td (padding: 7px;) Try it "

    The size of the 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, setting the desired dimensions either to the table itself or to the cells:

    Table (width: 70%;) th (height: 50px;) Try it "

    Text alignment

    By default, text in table header cells is center-aligned, and text in normal 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 vertically aligned to the center of the cells. Vertical alignment can be overridden with one of the values ​​for the vertical-align property:

    • top: text is aligned to the top of the cell
    • middle: aligns the text to the center (default)
    • bottom: text is aligned to the bottom of the cell
    Document's name
    NameSurname
    Homerthe Simpson
    Margethe Simpson


    Try "

    Alternating the background color of table rows

    When scanning large tables containing many rows with big amount information, it can be difficult to keep track of which data belongs to a particular row. To help users navigate, you can use two different background colors alternately. To create the described effect, you can use the class selector, adding it to every second row of the table:

    Document's name

    NameSurnamePosition
    Homerthe Simpsonfather
    Margethe Simpsonmother
    Bartthe Simpsona son
    Lisathe Simpsondaughter


    Try "

    Adding a class attribute to every second line is a tedious task. The: nth-child pseudo-class has been added in CSS3 to solve this problem alternative way... The alternation effect can now be achieved exclusively by means of CSS without having to change the HTML markup of the document. With the pseudo-class: nth-child it is possible to select all odd or even rows of a table using one of keywords: even (even) or odd (odd):

    Tr: nth-child (odd) (background-color: # EAF2D3;) Try it "

    Change line background on hover

    Another way to improve the readability of tabular data is to change background color lines when you hover over it with the mouse cursor. This will help highlight the desired table content and enhance the visual perception of the data.

    Implementing this effect is very simple, for this you need to add the: hover pseudo-class to the table row selector and set the desired background color:

    Tr: hover (background-color: # E0E0FF;) Try it "

    Center alignment of the table

    Aligning an HTML table to the center is possible only if the width of the table is less than the width of its parent element. To align the table in the center, you need to use the margin property, setting 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 for automatic center alignment:

    Table (margin: 10px auto;) Try it "

    If you need different margins at the top and bottom of the table, then 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;)

    We have considered many methods of styling elements on the 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 are help systematize important information and make it easier to serve.

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

    Hypertext Markup Language HTML provided us with a large number of opportunities to bind CSS styles to ten unique tags designed for working with tables, I suggest repeating them before further study:

    ("Footer" of the table) background color - coral, for element ("Header" of the table) set the background color silver.
  • For items
    • that are inside the element (table body) set background color 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 shows how to apply corner rounding to table cells (property).

    Example of rounding the corners of a cell
    TagDescription
    .
    Defines the contents of the table.
    Specifies the name of the table.
    Defines the header cell of the table.
    Defines a row in a table.
    Defines the data cell of the table.
    Used to contain the group heading in the table (table heading).
    Used to contain the "body" of the table.
    Used to contain the "footer" of the table (footer).
    Defines the specified column properties for each column within a tag
    Defines a group of columns in a table.

    Working with table indents

    Using padding in a table
    Table indents
    1 2 3 4
    2
    3
    4


    In this example, we:

    • Placed the table in the center using the horizontal alignment technique margins(margin: 0 auto).
    • For the name of the table (tag
    ) we set the bottom padding to 19 pixels. I hope you are not confused by the uneven numbers :)

    The result of our example:

    Spacing between cells

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

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

    Change the spacing between tables
    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 come back to it in this tutorial - "".
    • In addition, we set the table padding on the right 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.
  • For the table cells (header and data cells), we set a 1 pixel solid border with # F50 hexadecimal and set the padding to 19 pixels for all sides.
  • For the first table with class .first we set the spacing between table cells (border-spacing property) to 30px 10px, for the second table with the class .second equal to zero, for the third table with class .third equal to 0.2em.

    • I draw your attention to the fact that if only one length value is specified in the border-spacing property, then it indicates the spacing, 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:

    Display borders around table cells

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

    Double borders are formed due to the fact that the lower border of one cell is added to the upper border of the cell that is below it, a similar situation occurs on the sides of the cells and this is logical from the point of view of displaying the table, but fortunately there is a way to tell the browser that we are we don't want to see such cheeky behavior of cell borders.

    To do this, you need to use the CSS border-collapse property. Oddly enough, using the border-collapse property with the collapse value is the best way how you can remove the gap between the cells and not get double borders between them.

    Consider a comparison of border behavior when using the border-spacing property with a value of 0 and the border-collapse property with a value of collapse:

    Example of displaying borders around table cells
    border-spacing: 0;
    1 2 3
    2
    3
    border-collapse: collapse;
    1 2 3
    2
    3


    In this example, we:

    • Made our tables float and left-aligned (float: left), set their right padding to 30px.
    • Set for the table name (tag
    ) - bold.
  • For the table cells (header and data cells), we set a 5px solid border with # F50 hex and set a fixed width of 50px and a height of 75px.
  • For the first table with class .first we set the spacing between table cells to zero (border-spacing: 0;), and for the second table with the class .second set the border-collapse property to collapse, which merges cell borders into one when possible.

    • The result of our example:

    Empty cell behavior

    Using CSS you can set whether to display borders and backgrounds for empty cells in a table or not. The empty-cells property is responsible for this behavior, which by default, as you may have noticed from the previous examples, displays empty cells.

    Let's move on to an example:

    Example of displaying empty table cells
    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 (the 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 caption (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 the title under the table, you need to use the property with the bottom value.

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

    Example of using the caption-side property
    Heading above the table
    NamePrice
    A fish350 rubles
    Meat250 rubles

    Title below the table
    NamePrice
    A fish350 rubles
    Meat250 rubles


    In this example, we have created two classes that 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 a default caption-side property and was 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 alignment for content in cells, you need to use special keywords with the text-align property. Let's consider the application of the keywords of this property in the following example.

    Example of horizontal alignment in a table
    MeaningDescription
    leftAligns the cell text to the left. This is the default (if the text direction is left to right).
    rightAligns the cell text to the right. This is the default (if the text direction is right to left).
    centerAligns the cell text to the center.
    justifyStretches lines so that each line has the same width (stretches the cell text to fit the width).


    In this example, we have created four classes, which set different horizontal alignment in cells and applied them in order to the rows of the table. The value in the cell matches 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 used:

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

    Let's look at an example of use:

    Example of vertical alignment in a table
    MeaningDescription
    baselineAligns the baseline of the cell to the baseline of the parent. This is the default.
    topAligns the contents of the cell vertically to the top.
    middleAligns the contents of the cell vertically in the middle.
    bottomAligns the contents of the cell vertically to the bottom.


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

    Algorithm for placing the layout of the table by the browser

    CSS uses the browser's automatic table layout algorithm by default. In this case the column width is set by the widest non-breaking content of the cell. This algorithm can be slow in some cases, as the browser must read all of the content in the table before determining its final layout.

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

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

    Let's look at the application of this property with the following example:

    An example of using the table-layout property
    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 upon the methods of styling the rows and columns of the table in the article "". In this article, we looked at using a group pseudo-class that allows you to alternate row styles in tables using values even (honest) and odd (odd), or by elementary mathematical formula.

    Let's revisit the previous techniques and explore new ways to style rows and columns in tables. Let's move on to examples.

    An example of using the: nth-child pseudo-class with tables
    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'll look at the options for styling table rows.

    An example of styling rows in tables
    ServicePrice
    Sum 15 000
    1 1 000
    2 2 000
    3 3 000
    4 4 000
    5 5 000


    In this example, we:

    • Set the width of the table to 100% of the width of the parent element, set the header and data cells to a 1px solid border.
    • Installed for the item
    1 2 3 4 5


    In this example, we:

    • Center the table with paddings, set the width and height of the header cells to 50px, specified transparent border 5 pixels.
    • Found that when hovering (pseudo-class: hover) over the header cell, it gets the background blue colors, Orange text color, border orange colors 5 pixels and a radius of 100%.
    • Transparent border is necessary in order to reserve space for the border, which will be displayed on hover, if this is not done the table will "jump".

    The result of our example:

    The following example touches on the use of HTML elements

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


    In this example, we:

    The result of our example:

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

    In the previous example, we realized that HTML element

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


    In this example, we:

    • We set our table to occupy 100% of the parent element, the table cells occupy 25% of the parent element and have a 1 pixel green solid border, the headers and data cells are 45px high. We removed the gap between the cells using the border-collapse property with the value .
    • And so, using the :: after pseudo-element, add content after each element. on hover. The :: after pseudo-element is necessarily 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, while the ancestor must have a position value other than the default static, otherwise the count will be relative to the specified edge of the browser window, for this reason we set for the table relative positioning(relative).
    • We set for our generated block the top property, which indicates the direction of offset of the positioned element from the top edge, and the bottom property, which indicates the direction of offset of the positioned element 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 by Z axis... This property is necessary so that the text is in front of this block, and not behind it, if you do not set a value less than zero, then the block will close the text.

    The result of our example:

    If at this stage of the 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 tutorial "Positioning elements in CSS".

    Questions and tasks on the topic

    Complete the Practice Activity before moving on to the next topic:


    If you are having difficulty completing the practice, you can always open the example in a separate window and inspect the page to see what CSS was used.


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