Stylish html css table

In the recent past, the popularity of tables has been incredibly high, they were used not only to present tabular data, but also were the main means of forming the structure of a document (despite a number of disadvantages). Currently, the DIV block element is increasingly used for document layout.

The table remains the main element HTML language, which is indispensable for creating complex structures and for presenting tabular data, where block elements are powerless and do not have such variability.

Table base

The table is a complex structure and is formed from several HTML tag ov. At the first stage, it is built from block element

The final stage of table construction is creating cells. There are two categories of tags for this purpose:

• - the paired tag creates a cell that serves as a column header, this tag is optional;
• - a mandatory paired tag creates cells - the basis of the table;

Fig 1. Table

As you can see from the code above, the table contains four rows ( ) and five columns. The cells of the first row are the column headers ( ). Cells from the second to the fourth contain the main data of the table( ). Tags , are universal, and can contain not only plain text, but also all kinds of tags, even other tables!

Pay attention to the structure of the table; it has a strictly nested hierarchical structure; if you break it and rearrange the tags in a different order, the table will either not be displayed on the page, or will be displayed, but not correctly. Basic rules when designing a table:

• Paired tag the base of the table, all other tags are nested within it;
  Paired tag
  the second level of the table or its row must be nested in a tag ;
  Paired tags
  and contain tabular data;
  If you place any other tag or text outside the matching tag
  - Column headers section;
  - Table base section;
  - Summary section, summarizing the entire table;
  , , , are placed inside the table

  , which is placed after the tag . In principle, it can be inserted anywhere in the table; this is not an error. By default, the header text appears above the table.

  Table Header

  Heading 1	Heading 2	Heading 3	Heading 4	Heading 5
Cell 1,1	Cell 1,2	Cell 1.3	Cell 1.4	Cell 1.5
Cell 2.1	Cell 2,2	Cell 2,3	Cell 2.4	Cell 2.5
Outcome 1	Outcome 2	Outcome 3	Outcome 4	Outcome 5

  Rice. 2. Table with title.

  Table Sections

  Using sections, which are paired tags, the table can be divided into logical parts. They are not displayed by the browser on the page, but you can set a different representation for each of them. There are the following three logical parts:

  And	third level of the table or its cells must be nested in a tag
  , then this data will be ignored and will not be displayed on the web page; Table title The table provides the ability to add a title using a paired tag

  , and must contain tags :

  Table Header

  Heading 1	Heading 2	Heading 3	Heading 4	Heading 5
  Cell 1,1	Cell 1,2	Cell 1.3	Cell 1.4	Cell 1.5
  Cell 2.1	Cell 2,2	Cell 2,3	Cell 2.4	Cell 2.5
  Outcome 1	Outcome 2	Outcome 3	Outcome 4	Outcome 5

  Merging cells

  Above we looked at a table with a simple structure, but what if you need to complicate it, for example, combine several cells into one. There are special attributes for this case COLSPAN And ROWSPAN tags And . The first is used to combine horizontally, the second vertically. The value for the attribute is the number of cells to be merged:

  1. To merge horizontally first four cells last line table, required by the COLSPAN attribute of the tag (which contains the text “Total 1”) assign the value 4:

  Total (1+2+3+4)

  2. To merge cells vertically the main part of the document (part ), use the ROWSPAN attribute with a value of 2:

  Cell (1,1+2,1) Cell (1,2+2,2) Cell (1.3+2.3) Cell (1.4+2.4)

  Please note that if you combine cells with the COLSPAN or ROWSPAN attributes, you must remove the merged cells from the code, except for the one with which the merge begins, their number will depend on the value of the COLSPAN, ROWSPAN attribute.

  That is, in example 1, four cells are merged, starting with the first one, which is assigned the attribute COLSPAN=4 (since the merge begins with it), the remaining three must be deleted (since they are considered merged). Only the fifth cell will remain in the code (since it is not included in the union).

  The same principle will apply to vertical unification. In the second example, the first four cells of the row are assigned the ROWSPAN=2 attribute, as a result the first four lower cells are removed from the code, because they are considered united. Except for the last one, which is not included in the association.

  Table Header

  Heading 1	Heading 2	Heading 3	Heading 4	Heading 5
  Cell (1,1+2,1)	Cell (1,2+2,2)	Cell (1.3+2.3)	Cell (1.4+2.4)	Cell 1.5
  				Cell 2.5
  Total 1+ Total 2+ Total 3+ Total 4	Outcome 5

  

  Rice. 4. Merging table cells using the COLSPAN, ROWSPAN attributes.

  Decorating Tables with CSS Properties

  After creating the table using HTML, move on to the next stage, designing the table using CSS styles that apply to tags

  , , and he has an ancestor

  .

  Cell frames

  You can draw a frame around the cells using using CSS properties border, with the following syntax:

  Border: “line thickness” “style type” “color”;

  • line thickness- can be specified in pixels (px), as well as using special reserved words: thin (2 px), medium (4 px) and thick (6 px);
  • style type- attribute values ​​are special words: dotted (dotted line), dashed (dotted line), solid (line), double (double line), etc.

  Fig 5. Applying the border property to table cells to frame each cell with a frame.

  If you want the frame to be only between the cells, and not frame each one separately, you need to use the style property border-collapse, taking the value:

  • collapse- there is only one frame between the cells;
  • separate- each cell is framed by its own frame;

  Figure 6. Applying the border-collapse property to a table. Adjacent cells are separated by one frame.

  Cell sizes

  By default, the browser forms cell sizes depending on their content, if necessary, set static form, use the style property width, height. In this case, if the contents of the cell do not fit on one line, then it is transferred to the next one.

  Fig 7. Using the width and height properties to set the width and height of cells.

  Cell padding

  There are two types of indents, external and internal, the first type of indent is set between the borders of adjacent cells, the second from the borders of cells to their contents. The CSS properties that create indentation are listed below:

  • padding- padding, the value is set in pixels (px);
  • border-spacing - margin, the value is also set in pixels (px). This parameter should not be used if (border-collapse:collapse), because the indentation is set between the borders of adjacent cells, and if the specified property is present, adjacent cells are separated by only one frame;

  Rice. 8. Applying the padding property to the table to set indents.

  Header Location

  By default, the table header is located above it, but the position can be changed using the style property caption-side, which takes the following values:

  • top- the title is located above the table;
  • bottom- the title is located below the table;

  Cell color

  To color a cell a certain color you need to use the property background-color:

  Rice. 10. Aligning the contents of cells with the text-align and vertical-align properties.

  Styling cell contents

  Content formatting refers to the formatting of the text contained in the cells. Basics CSS property, used for this purpose is font:

  Rice. 11. Decorating the cell contents with the font property.

  All CSS styles applied to the table

  Designing tables using CSS is an interesting and responsible activity. You need to approach this matter competently, with knowledge of all the possibilities of styles. In addition, you need to have a sense of beauty so as not to scare off site visitors with your creativity.

  Almost anything can be transformed in tables. Beautiful design CSS tables involves the use of border design, table background, cell background, space between them and much more. Let's look at the most basic things.

  Table Border

  CSS table styling always involves playing with the border (border). All tables are not surrounded by a border by default. That is, it is equal to 0 pixels. But this can be fixed using the border property.

  You can specify outer frame for the entire table:

  table ( border: 3px solid black; )

  Thanks to this line, all tables on the site that use this style will have a black border. Note that the border is only around the edges, not inside the table. For cells and rows, the frame is set differently.

  th, td (border: 3px solid black;)

  You can specify any thickness and color. Keep in mind that borders are not doubled when cells are joined.

  The word solid means continuous design. You can specify other values.

  Most often, a solid frame is used because it looks more attractive and does not distract attention from the main content of the site.

  The border property can also be specified in directions. The border can only be set for the top, bottom, left or right part. Because in some cases the option with a frame for the entire table at once is not suitable.

  table (border-top: 1px solid red; )

  This way you can set a border only for the top part of the table. Similarly for any other sides, just instead of top we write: right, left or bottom.

  Table title

  The table title can be specified using a tag

  . This tag can have many properties in CSS for more fine tuning. IN CSS styling The good thing about tables is that you can maneuver the elements the way you want.

  This heading is displayed in the same way as standard in books (for example, "Table 1").

  You can also specify the location of this title using the caption-side property (top or bottom). Left or right alignment is specified by the text-align property.

  Table background

  The background of the table can be any color or pattern. The color is specified by the background-color property. The names of the properties fully correspond to those used in speech. This makes memorization much easier.

  Color can be indicated either by name or different encodings. In addition, you can specify the following:

  • Transparent - element transparency.
  • Inherit - the color is the same as parent element.
  • Initial - default value.

  The transparency option can be used in cases where all tables in the text in the CSS file are designed in the same color, but in in this case there is no such need.

  In addition, the background can be an image. To do this, the background-image property is specified in the style. The path is indicated like this:

  The path to the file can be either relative or absolute.

  A more complex fill can be done with a gradient:

  • linear-gradient();
  • radial-gradient();
  • repeating-linear-gradient() and repeating-radial-gradient() - repeating the gradient.

  Cell background

  In addition to the background as a whole, you can set an alternating background in columns or rows. This property is used very often for design, since the visual separation of lines makes the information easier to read.

  In addition to alternation, you can also specify the number of a specific column or row. For example like this:

  • tr:nth-child (even) ( ... ) - indication of line alternation;
  • tr:nth-child (1) ( ... ) - indicating the property of a specific row;
  • td:nth-child (even) ( ... ) - indicating the alternation of columns;
  • td:nth-child (1) ( ... ) - indicating the property of a specific column.

  In addition to alternation and numbers, you can specify the first (td:first-child) or last (td:last-child).

  Space between cells

  In CSS, table styling allows you to remove spaces between cells. By default they are. For example, if you set a frame in a table without setting the distance between the borders, you will get the following result.

  Agree, it does not look very nice and is not convenient for reading. Users will have a ripple in their eyes because of this. You can remove these gaps by writing the following line in the table style:

  border-collapse: collapse

  But it also happens that the distance, on the contrary, needs to be increased. Moreover, the size of the gaps can be specified both between columns and between rows. To do this, specify the following value (instead of collapse):

  border-collapse:separate

  But this action will indicate that the cells need to be divided. How exactly to separate them is indicated by an additional property:

  border-spacing: 20px.

  If you need to specify different distance between rows and columns, then two values ​​are indicated:

  border-spacing:10px20px.

  Browser difference

  Keep in mind that table styling in CSS may look different depending on the browser. The situation is especially bad with older versions, which do not support innovations in CSS.

  Above is an example of border thickness for digital values.

  Frame styles also vary greatly.

  Therefore, when developing, always look at the result in different browsers.

  Very advanced developers can connect completely different CSS files. And someone does checks in each or any specific style (class).

  The most problems arise with shadows.

  CSS: table design, examples

  The design can be very diverse. It all depends on the site as a whole and its design. Everything should be combined and not full of colors. The taste of the developer also plays a big role. Everyone's sense of beauty is different.

  Here are examples of various tables. The picture above shows the use of tilt and playing with and boundaries.

  Many will be interested in an example of a beautiful, neat design that will not hurt the eyes of users. This option is appropriate in almost any situation.

  The edges can be made rounded. It looks quite nice.

  Conclusion

  As you can see, for registration appearance tables in CSS exist great amount tools. Each parameter also has a huge number of possible values. If you use all this at once, you can create masterpieces. Especially if you do it for all browsers.

  The main thing when designing is not to overdo it with effects. Everything needs to be done in moderation. At first, layout designers love to experiment and use all their knowledge at once. As a result, the tables end up being oversaturated with properties. Try to avoid these mistakes.

  Moreover, some parameters may interfere with each other. For example, there is no need to specify the table background color if the background picture, which will overlap the specified color.

  Without styles, our table looks very simple and inconspicuous:

  Figure 1. Table view without styles.

  Let's add styles to make it more beautiful:

  River	Length (km)	drainage basin
Amazon	6992	6915000
Nile	6852	3349000
Yangtze	5800	1800000

  Now our table looks like this:

  Figure 2. View of the table with styles.

  In this style you need to pay attention to the rule:

  /* Set the line highlighting when hovering the cursor */ tr+tr:hover( background-color: #e6e3da; )

  This uses the adjacent element selector (plus sign) and the :hover pseudo-class, which defines the style of the element when hovering over it.

  We don’t need to change the background color of the table header on hover, right? We need to change the background color for all rows except the first one.

  The adjacent tr+tr selector will be applied to all lines except the first. Read more about neighboring selectors here. And the pseudo-class :hover indicates that the style from CSS rules Only needed when hovering the cursor.

  Now we have quite real example tables. Just keep in mind that there can be several tables on a page and not all of them need to have this style applied. In order for the style to work only on one table, we assign a class to it, read CSS classes.

  In the example below, the comment is only for the added code.

  River	Length (km)	drainage basin
Amazon	6992	6915000
Nile	6852	3349000
Yangtze	5800	1800000

  Nothing has changed in how this example works, but it shouldn't have. Just if you now save this example to your computer, and in the example add a second table, for example, copy the existing table code, but delete class ="river", but the style will only be applied to the table with the class installed. This simple basics CSS.

  Second example

  Now let's set the following task: we need to highlight the first column in light gray.

  To solve this problem, we will use the :first-child pseudo-class. Using this pseudo-class, you can access the first cells of each row.

  Name:	Jack
Surname:	London

  This is a very simple example. Let's use child selectors to access these elements.

  In our code, the tag

  ,	,
  ancestor

  , that is, the child selector should be like this:

  Name:	Jack
  Surname:	London

  And now we see that our style is not working. Why? After all, at first glance, the selector is specified correctly. The thing is that after the tag

  there's always a tag . It is there, even if it is not written in the code. Therefore the code will work:

  Name:	Jack
  Surname:	London

  You definitely need to know this point when working with tables.

  Now there is one more point, although it is not directly related to tables, but when working with them, similar questions can often arise. Let's look at it using this code as an example. For example, we want to set the background color of the last row cells to red. We will use the class (class ="my-td") for this.

  Name:	Jack
  Surname:	London

  As a result, the class worked in the second cell ("London"), but did not work in the first cell for which the selector worked table > tbody > tr > td:first-child.

  Why did it happen so?

  Because the selector table > tbody > tr > td:first-child has more “weight” (significance) for CSS, because it is more specific.

  How to fix it?

  You can use a more specific selector to define the class: table > tbody> tr > td.my-td .

  You can use the !important rule. This rule increases style priority; this use of this rule is considered an extreme case.

  Name:	Jack
  Surname:	London

  In this case, instead of classes, you can use id identifiers, their priority is higher and the style will be executed.

  Each browser has its own priorities, I haven’t read about a strict standard anywhere. But general rules There is:

  1. the more specific the selector, the greater its weight;
  2. id is more important than class.

  Of course, this topic is not directly related to HTML tables; we just looked at an example of selector priority using tables as an example.

  But, regarding CSS, you should remember that CSS does not work well when selecting table cells (tag ). It is better to assign the class to a string (tag ), and then use a selector with the pseudo-class td:nth-child(n) to specify the desired cell.

  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. HTML Content tables are described line by line, each line begins 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 frame, you will need to set border property and for elements 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, between the frames there appeared empty space, you can control the size of this space using 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 on a short distance from each other, each cell has its own frame. 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 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 center aligned, 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 vertical-align property values: top: text is aligned to the top border of the cell middle: aligns text to the center (default) bottom: text is aligned to lower limit cells Name Surname Homer Simpson Marge Simpson Try » Alternating the background color of table rows When viewing large tables containing many lines with big amount 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 alternation effect can be achieved exclusively using CSS without 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 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 HTML alignment Centering a 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 indentations 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 horizontal alignment, and the third for the bottom margin: Table ( margin: 10px auto 30px; ) Many web masters are sure that using HTML tables in templates is bad practice. But in this lesson we'll only look at CSS tables. What's the difference between HTML and CSS tables? Should I use CSS tables? If so, how? How to Create a CSS Table The CSS table model is based on the HTML4 table model and is well supported by browsers. In both models, the table structure exists parallel to the visual presentation. The main elements of the structure are lines. The row is defined explicitly, and the columns depend on how the rows and cells are defined. You've probably worked with HTML tables before. If yes, then you will have no problem creating CSS tables. Every HTML table element has a CSS equivalent. The only difference is that there is no difference between td and th in the CSS variant. Below is a list of HTML table elements and their corresponding CSS values. Table ( display: table ) tr ( display: table-row ) thead ( display: table-header-group ) tbody ( display: table-row-group ) tfoot ( display: table-footer-group ) col ( display: table- column ) colgroup ( display: table-column-group ) td, th ( display: table-cell ) caption ( display: table-caption ) Captions can be placed at the top or bottom of the table using the caption-side property: #caption (caption-side: top) #caption (caption-side: bottom) It's easy to figure out how to create a CSS table based on the list below. Here is an example table. #table (display: table;).row (display: table-row;).cell (display: table-cell;) If you look at the code Example HTML, then you can easily distinguish the table structure (using div and span elements with classes and IDs instead of table , td and tr). At all small code CSS represents div and span elements as a table. In addition to the properties above, the CSS table model includes the value inline-table , which defines new table like display: table , but within the context of the format built into the HTML code. Columns and their grouping Since table cells are descendants of table rows, it makes sense to use some properties to form columns. The CSS table model allows you to apply the following properties to columns and their grouping: border- a normal property, as long as the border-collapse property is not used for the table element; background— a normal property, as long as the row and cell have a transparent background; width— setting the column width; visibility— if the value is collapse (the only available value), then the column cell will not be displayed (it is merged with other columns and the table width is aligned). CSS table stack Various table elements have different level in a stack to allow different backgrounds to be used on different layers. These layers can be seen in the presented figure. table - bottommost layer column group columns string group lines cells - the topmost layer The layer's background will only be visible if the layer above it has a transparent background. This great way to output empty cells truly empty using transparent background for them, through which a row, column or table will be visible. Table Template Algorithm The width of a CSS table can be calculated using one of two algorithms. The algorithm is selected using the table-layout property and two values: fixed(fixed) - the width of the template is determined not by the content, but by setting the width of the table, cells, frames and the distance between cells; auto(automatic)—the table width is set based on the width of the columns and frames. The fixed template model is calculated once and is very fast. A auto mode(default) requires multiple passes through the HTML table. If you explicitly define the table width, then you should use a fixed width calculation model. By default, the cell height is set to the minimum required to display the content. But you can explicitly define the cell height. All cells in the row will have the height of the cell with the maximum value. The vertical-align property determines the alignment of content in a line baseline bottom middle sub, super, text-top, text-bottom,<длина>, <процент> The last group of values ​​is applied not to cells, but to the text in them. The cells in this case will be aligned in accordance with the baseline value. CSS Table Borders There are three interesting properties for table frames: border-collapse- can have the values ​​collapse , separate , or inherit border-spacing- may matter<расстояние_по_горизонтали>, <расстояние_по_вертикали>, or inherit . Defines the distance between cell frames. empty-cells- can have the values ​​show , hide , or inherit . If the cell is empty or has the visibility: hidden property, then the content will not be displayed by default. Setting the empty-cells: show property will display the background and border for an empty cell. Do I need to use CSS tables? Are CSS tables better than HTML tables? If yes, what are their advantages? If not, then why shouldn't they be used? Good questions, for which there is no clear answer. When you look at using HTML tables versus a combination of divs and CSS code, you'll notice the following disadvantages of tables: Additional coding- HTML tables require additional structure coding compared to div elements. But CSS tables also require the use of additional classes and identifiers. Rigid structure— HTML tables are very strictly tied to the content. The order of the cells must be the same as it will be displayed. But the same limitation applies to CSS tables/ Output in browsers- browsers make multiple passes through HTML structure tables. But for CSS tables the situation will be similar. In accordance with the above, tables do not have CSS significant advantages before HTML tables when using them in templates. CSS tables are a more semantic solution because there is a clear separation between data structure and appearance. Conclusion CSS tables are fairly easy to learn and use. But they have no obvious advantages over HTML tables, except for more semantic code. Maybe practice will show the advantages or disadvantages of CSS tables. Do you have experience using CSS tables in real projects? Internet Programs Instructions Browsers Windows 10 Android iOS Connection The last notes Printing continuous lines in Excel Getting started in the editor How to adjust color on a computer? Why do we need virtual machines? How to disable Android updates: applications and system How to disable auto-updates of Android applications on Google Play Popular How to transfer contacts to xiaomi Jabra Halo Smart review: long-lasting Bluetooth headphones Made in China Highscreen Zera S - Specifications News 2024-05-09 01:44:30 Specifications of the Samsung I9300 phone: comparison with competitors and reviews 2024-05-09 01:44:30 How to flash Lenovo S60, unlock bootloader, root and custom firmware? 2024-05-08 01:36:40 Transferring the Yandex browser cache to another drive 2024-05-08 01:36:40 A vertical stripe appears on the monitor - who is causing the problem? 2024-05-08 01:36:40 Wireless headphones AKG K912 viws.ru viws.ru - All about modern technology. Breakdowns, social networks, internet, viruses 2024 - All rights reserved Contacts About the site Advertising on the website Internet Programs Instructions Browsers Internet Programs Instructions Browsers