Table padding between cells.

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)
  • % (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 properties of tables and variations in their design, tables have long been a standard for web page layout. 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 to 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 using 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 mark 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 a separator between table columns using the dashed border 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:

    1
    2

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

    Specifies the distance between the borders of cells in the table. The border-spacing attribute does not work when the table has border-collapse set to collapse.

    Syntax

    border-spacing: value [value]

    Arguments

    One value sets both the vertical and horizontal distance between cell borders. If there are two arguments, then the first defines the horizontal distance, and the second defines the vertical distance.





    border-spacing










    12
    34


    The result of this example is shown in Fig. 1.

    Rice. 1. Applying the border-spacing parameter

    Note

    If the tag

    the cellspacing parameter is added, then when using the border-spacing style attribute it is not taken into account and the cellspacing value is ignored. The exception to this rule is Internet Explorer, which does not understand the border-spacing property at all.

    Tables

  • border-collapse sets how to display borders around table cells. This parameter plays a role when a frame is set for the cells, then a line of double thickness will be obtained at the junction of the cells. Adding the collapse value forces the browser to parse such places in the table and remove double lines in it.
  • table-layout defines how the browser should calculate the height and width of table cells based on its content.
  • border-spacing sets the spacing between the borders of cells in the table. The border-spacing attribute does not work when the table has border-collapse set to collapse.

    • CSS allows you to set not only the style of the table border, 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 the 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:

    1
    2
    3
    4
    5
    6

    		 Page