Css table row color. Note: negative offset

Signs of pregnancy after embryo implantation

Using the BGCOLOR attribute, you can change the color of the contents of a cell, a row, a group of columns, a group of rows, or an entire table.

The color can be specified either by the color name or by the hexadecimal value of the color code with the # sign.

Example:

HTML code:


Browser display:


1 2
3 4

Graphic background table html page

Using the BACKGROUND attribute, you can set the graphic background of a cell or entire table. If an image is larger than the cell or table it is intended for, the browser crops the image to fit within the appropriate object.

Example:

have many attributes that must be specified in order for our table to have a frame, background, dimensions, etc.

First we will look at the attributes that are inherent in tags

HTML code:


11111 22222 33333 44444

Browser display:


11111 22222
33333 44444

Aligning data in an html page table

The ALIGN and VALIGN attributes are used to align data in the table.

The ALIGN attribute is for horizontal alignment. By default, header content is centered and cell content is left aligned.

The VALIGN attribute aligns data vertically. By default, information is aligned in the middle. Alignment tools can be used in a single cell, row, group of columns, or group of rows. The alignment attribute in table cells has the highest priority.

If you limit the distance between a cell's contents and its edges using the CELLPADDING attribute, this affects the alignment result. For example, with CELLPADDING=3 and ALIGN="top", the data will be placed three pixels from the top border of the cell.

Example:

which is responsible for creating strings, and the tag, responsible for creating cells.

In order to see how everything works in practice, let's create a table consisting of two rows and four cells. The code for our table will be as follows:

HTML code:


1111
2222		 22222 Bottom cell Bottom cell

Browser display:


1111
2222 		22222
Bottom cell Bottom cell

Resizing an HTML page table

The width of the table is specified by the WIDTH attribute. The value can be specified both in absolute units (WIDTH=250) and in relative units (WIDTH="80%"). For example, by setting the width to 600 pixels, you can be sure that the table will fit in the browser window at any monitor resolution.

The same can be done with the table height using the HEIGHT attribute.

When setting the width and height of a table to excessively small values, the browser determines the minimum values ​​that allow the data to be displayed normally.

All of the above applies to table cells. In this case, it is not at all necessary to specify the dimensions of each individual cell. When you change the cell width, all adjacent cells within the column will be displayed based on the new value. The same is true for cell height.

Hello, dear readers of the blog site. I decided to write a short post on the topic of using CSS to improve the experience of site visitors.

Out of nowhere the thought came to mind that if the items in the right menu of my blog liven it up with alternating background colors(make different colors for even and odd lines), this can improve usability. Here I pin my hopes on the ease of perceiving a large amount of information when it is divided into blocks (as happens, for example, when using paragraphs in a text).

This practice is very often used when styling tables, when they want to increase the visibility of the information displayed in them. While searching for a solution, it turned out that this problem can be solved quite simply using CSS alone.

There is no need to mark even and odd list elements with classes (the right menu works on my basis). You just need to add a couple of lines of code using the nth-child pseudo-class in a CSS file, who is responsible for the styling of the site. However, nth-child has a lot of other uses, which I will also not fail to mention in the post.

Possibilities of the nth-child pseudo-class and its use on the site

Actually, after announcing the pseudo-class nth-child, I could end the post, because you yourself can Google a lot of information on it. But this is not our path, so we will continue. So, first I will describe my steps to turn the right menu into a “striped” one. It was enough to find out using the developer tools built into browsers (called from the context menu of the desired element on the web page by selecting an item like “View element code”) where in the style file the appearance of the lines of this list is set.

The principle of working with developer tools is similar to what I described in the article about . Right-click on any item in the left menu of my blog and look at the resulting report in the panel that opens:

On the left you will see the Html code of this element (we are interested in the element with LI tags - the list line), and in the right column are the CSS rules that the browser uses to style it. You can immediately find out where the style file is located by moving the mouse cursor to its name.

In my case, this will be a file that can be opened by connecting to the site via FTP and following the following path (I would not recommend editing template files from the WordPress admin area, because there is no way to take a step back, as is possible, for example,).

/wp-content/themes

In fact, on the toolbar for developers in the area of ​​CSS styles, you will even find a line on which the desired rule is written in the style file. In my case it is 281 lines. Therefore, having opened style.css in Notepad (I have it assigned as the default editor for all files that appear in the site engine), I immediately moved to this line.

And right below it I added a couple more rules with (this rule is responsible for changing the background color of the right menu bar when the mouse cursor is directly above it - this makes the menu more “alive” or something) and with the nth-child pseudo-class mentioned above. If we have already talked about hovver (see the link just above), then we’ll talk about nth-child now. If you noticed that the parameter 2n is written in parentheses for this pseudo-class.

Nth-child(2n)

In general the value of this pseudo-class nth-child is given using the expression: an+b, where a and b are integers, and n is a counter that takes integer values ​​from 0 and more: 0,1,2,3... In our case, when changing the counter n, we will receive the numbers 0, 2, 4, 6, etc. This means that the property specified for this pseudo-class (in our case, this is the rule for setting the background of a list line using ) is in the list at #E4F2FA.

This hexadecimal is the most common. To find suitable colors, I used the Contrast Analyzer 2.0 program described in the link provided. It allows you to capture a color from the screen and match its lighter tones, which is exactly what I did.

For the background of the menu bar, when hovering over it with the mouse cursor (pseudo-class hover), I chose an even lighter shade from the same row.

Other examples of using nth-child

If you want to change the background or otherwise affect the appearance (for example, add padding, make the font larger, or do something else more indecent), then use an expression. You can check that by substituting integers starting from zero for n, you will get only odd numbers as a result. You can use both options at once (for even and odd rows of lists, tables, or anything else).

More some examples of using nth-child to highlight various rows of lists, tables and similar elements:

  1. To mock odd elements, you can use nth-child (odd) instead of the expression shown above, and nth-child (even) for even elements.
  2. What if you want to change only the fourth line? then add to the CSS rule the pseudo-class nth-child (4) separated by a colon.
  3. Do you want to change the appearance of lines starting from the ninth? No problem - nth-child (n+9).
  4. If you want, on the contrary, to select only the first nine elements, then use the nth-child (-n+9) construction.
  5. If you want to select elements from the ninth to the eighteenth, add a compound pseudo-class:nth-child (n+9):nth-child (-n+18). Pure logic.
  6. Do you want to do the same thing as in the previous paragraph, but highlight only the even rows in this range? No problem - :nth-child (n+9):nth-child (-n+18):nth-child (even).

Well, that's where it is. The thing could turn out to be quite useful. In any case, it was useful to me.

Good luck to you! See you soon on the pages of the blog site

You might be interested

Selectors of pseudo-classes and pseudo-elements in CSS (hover, first-child, first-line and others), relationships between Html code tags
Display (block, none, inline) in CSS - set the display type of Html elements on the web page
CSS properties text-decoration, vertical-align, text-align, text-indent for decorating text in Html
List style (type, image, position) - Css rules for customizing the appearance of lists in Html code
How to find and remove unused style lines (extra selectors) in your site's CSS file
Position (absolute, relative and fixed) - ways to position Html elements in CSS (rules left, right, top and bottom) Different styling for internal and external links via CSS
Priorities in Css and their increase due to Important, combination and grouping of selectors, user and author styles
Font (Weight, Family, Size, Style) and Line Height rules for styling fonts in CSS
Float and clear in CSS - block layout tools
What is CSS for, how to connect cascading style sheets to an Html document and the basic syntax of this language
Tag, class, Id and universal selectors, as well as attribute selectors in modern CSS

- 4.7 out of 5 based on 6 votes

When creating web pages, it is often necessary to represent some of the page content in the form of tables.

Sometimes tables are used to create the structure of a page. This approach is not entirely correct, because tables were not originally intended to position page elements.

For this purpose, it is best to use CSS tools. But in some cases, tables are indispensable and convenient for providing information.

The tag is responsible for creating tables in HTML

and closing tag
. But you probably already know that tables consist of rows and cells. Therefore, in order to create a table, we need two more tags: this is the tag
1 - cell 2 - cell
3 - cell 4 - cell

To see what comes of this, create an HTML page using the code below. If you don't know how to create an HTML page, watch the lesson.

Table

1 - cell 2 - cell
3 - cell 4 - cell

You should get the following:

As you can see, our table doesn't look like a table at all yet. All this is because our tags

And
. In order to see how our table will change, you can add these attributes to the tags
and, refreshing the page, see how the table will look in the browser. For convenience, I will not provide the entire page code, but only the code relating to the tag i.e. what we will change.

And so tag

has the following attributes:

border - sets the width of the table border in pixels, written like this:

.

bordercolor – table border color; this attribute is not supported by all browsers, so you may not see the specified border color:

We set the frame width to 2 pixels, blue, the table will look like this:

width – sets the width of the table in pixels or percentages:

height – table height in pixels or percentages:

The width of the table will be 250 pixels and the height 150 pixels, the table will look like this:

align – table alignment;

align=left – the table will be aligned to the left;

align=right – the table will be aligned to the right:

Our table should be right aligned.

bgcolor – table background color, bgcolor=#FFC000 – table background color will be yellow:

The table will look like this:

background – using this attribute you can specify an image that will serve as the background of the table.

As an example, save the small image that you see in brackets () in the folder where you have the page with the table, and to the tag

add background="fon.gif" all the code:

The table will look like this:

cellpadding – an attribute that specifies the left, right, top and bottom padding inside a cell. For example, if to our tag

add cellpadding=10, then the text written inside the cells will be indented.

cellspacing – sets the space between table cells.

If you take a closer look at our table, you will see that there is a small space between the cell frames; this is the indent between cells, it is set by default. In order to remove it, it is enough in the tag

set cellspacing=0. All code:

As a result, our cells were pressed against each other, and the text inside the cells was indented:

hspace - sets the gap from the table to the left and to the right in pixels, written like this: hspace=20

nowrap – prohibits word wrapping in the cell, simply written nowrap

The last two attributes are used extremely rarely, so I do not show a code example with them.

Now let's look at the tag attributes

, some of them are the same as tag attributes

width - cell width in pixels or percentage.

height – cell height in pixels or percentages.

For example, let's set the width of the first cell of the first row to 30% - width=30% , and the height of the first cell of the second row to 100px. The code will be like this:

1 - cell 2 - cell
3 - cell 4 - cell

Note that you just need to set one cell's height or width and all cells in that row or column will take the same size. Therefore, if you need to set, for example, a certain height of cells, then it is enough to specify this parameter for one cell and all other cells in the row will become the same.

align – aligns the contents of cells, has the following values:

align="lef" – the contents of the cell will be aligned to the left;

align="right" – content will be aligned to the right;

align="center" – the content will be aligned to the center of the cell.

Let's add these attributes and values ​​to our code and align the contents of the 1st cell to the left (the content is aligned to the left by default, but in some cases this attribute is necessary), the contents of the 2nd cell are aligned to the right, and the 4th in the center.

1 - cell 2 - cell
3 - cell 4 - cell

bgcolor – using this attribute you can set the color of the cell.

background – sets the image as the background of the cell.

We have already encountered these attributes when considering tag attributes

. They work the same way, only in this case they set the background of the cell. For example, let's set the background color of the 2nd cell to yellow, and set the following image () as the background of the 4th cell.

To do this, we will add the necessary attributes to our code, for our cells bgcolor="#FFFF00" for the 2nd cell and background="fon.jpg" for the 4th cell. As a result, our table will look like this:

As you can see, despite the fact that we set the background of the table itself, if we set the background of the table cells, then exactly the background that we set for the cells will be displayed.

bordercolor – sets the color of the cell border.

We also encountered this attribute when considering tag attributes

. Please note that it does not work in all browsers. Please note that 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

There is no border attribute indicating the border of the cell. Let's set the border color of the 2nd cell to red; to do this, add the attribute bordercolor="#FF0000" to the second cell

There is another attribute designed to align the contents of cells:

valign – it aligns the contents of cells vertically.

Has the following meanings:

valign="top" – align the cell contents to the top edge;

valign="bottom" – aligns the cell contents to the bottom edge;

valign="middle" – alignment in the middle of the cell;

valign="baseline" – aligns the cell contents along the base line.

Let's add these attributes to each of our 4 cells.

1 - cell 2 - cell
3 - cell 4 - cell

Our table will look like this:

The last thing we need to cover in this tutorial is merging table cells. In order to merge several cells in a row, there is an attribute colspan="" where the number of cells that need to be merged is indicated in quotes.

From the author: CSS has selectors to find elements based on their position in the document tree. They are called index pseudo-classes because they look at the position of the element rather than its type, attributes, or ID. There are five of them in total.

:first-child and :last-child

As you might guess from the name, the :first-child and :last-child pseudo-classes select the first and last child in a node (element). As with other pseudo-classes, :first-child and :last-child have minimal side effects when using simple selectors.

Let's look at the HTML and CSS below:

:first-child and:last-child

List of fruits

  • Apples
  • Bananas
  • Blueberries
  • Oranges
  • Strawberries

< ! DOCTYPE html >

< html lang = "en-US" >

< head >

< meta charset = "utf-8" >

< title >: first - child and : last - child< / title >

< / head >

< body >

< h2 >List of fruits< / h2 >

< ul >

< li >Apples< / li >

< li >Bananas< / li >

< li >Blueberries< / li >

< li >Oranges< / li >

< li >Strawberries< / li >

< / ul >

< / body >

< / html >

The screenshot below shows the result.

The h2 header and the first li are colored pink because:first-child is not tied to specific elements. The h2 tag is the first child of the body tag, and li is the first child of the ul element. But why are the remaining li elements green? Because:last-child is also not tied to a specific element, and ul is the last child element in the body tag. In fact, in the styles above we wrote *:first-child and *:last-child.

Adding a simple selector to :first-child and :last-child makes them more specific. Let's limit our selection to only list items. Replace :first-child with li:first-child and :last-child with li:last-child. The screenshot below shows the result.

:nth-child() and :nth-last-child()

It's not a bad idea to be able to select the first and last child elements in a document. What if you need to select even or odd elements? Maybe we need to select the sixth element in the tree, or apply styles to every third child element. The pseudo-classes:nth-child() and:nth-last-child() will help us here.

Like :not, :nth-child() and :nth-last-child() are also functional pseudo-classes. They take one argument, which must be:

keyword odd;

keyword even;

an integer value of type 2 or 8;

argument in the form An+B, where A is the step, B is the offset, and n is a positive integer variable.

The last argument is a little more complicated than the others. We'll look at it a little later.

What is the difference between :nth-child() and :nth-last-child()? They differ in the starting point: :nth-child() counts forward, and :nth-last-child() counts backward. CSS indexes use natural numbers and start at 1, not 0.

Using the pseudo-classes:nth-child() and:nth-last-child() it is convenient to create alternating patterns. The striped table is a perfect use case. The CSS below gives the even rows in the table a light bluish-gray background, the result can be seen in the screenshot below:

tr:nth-child(even) ( background: rgba(96, 125, 139, 0.1); )

tr : nth - child (even ) (

background: rgba(96, 125, 139, 0.1);

If you switch from:nth-child to:nth-last-child, the bars are inverted because the count starts from the bottom. See screenshot below.

Do you want something more complex, with more complex arguments? Let's create a document with 20 elements as shown below.

Using :nth-child() and :nth-last-child() you can select one specific element. You can select all child elements after a given position, or you can select elements with an offset multiple. Let's change the background of the sixth element:

Item:nth-child(6) ( background: #e91e63; )

Once again, A is step. This is a factor for n starting at 1. That is, if A = 3, then 3n will select the third, sixth, and ninth elements, and so on. This is exactly what can be seen in the screenshot below.

Here everything is a little more interesting. Using :nth-child() and :nth-last-child() you can select all elements after a given point. Let's select all elements except the first seven:

Item:nth-child(n+8) ( background: #e91e63; )

Item : nth - child (n + 8 ) (

background : #e91e63;

There is no step specified here. As a result, n+8 selects all elements of n, starting with the eighth one. See screenshot below.

Note: negative offset

Negative values ​​and ranges are also valid. An entry like:nth-child(-n+8) inverts the selection and selects the first eight elements.

Using offset and step, you can select every third element, starting with the fifth:

Item:nth-child(3n+5) ( background: #e91e63; )

Item : nth - child (3n + 5 ) (

background : #e91e63;

Result.

only-child

The only-child pseudo-class selects an element only if it is the only child element. Below are two bulleted lists. The first has one element, the second has three:

  • Apple
  • Orange
  • Banana
  • Raspberry

< ul >

< li >Apple< / li >

< / ul >

< ul >

< li >Orange< / li >

< li >Banana< / li >

< li >Raspberry< / li >

< / ul >

The selector li:only-child(color: #9c27b0;) will select

  • Apple
    • , since it is the only child of the first list. The elements of the second list are not included in the selection, since there are three adjacent elements. The result is shown below.

    :empty

    You can use the :empty pseudo-class to select elements that have no children. The pseudo-class:empty speaks for itself (empty from the English “empty”). To be included in the:empty selection, the element must be completely empty, not even spaces. That is, it gets into the sample, but it doesn’t.

    Sometimes WYSIWYG editors insert empty p tags into your content. You can use :empty and :not to prevent styles from being applied to these elements. For example, p:not(:empty).

    Selecting elements of a specific type by their index

    The pseudo-classes described in the previous section select elements if they occupy a certain position in the document tree. For example, p:nth-last-child(2) will select all p tags before the last one inside the parent block.

    In this section, we will talk about typed index pseudo-classes. These pseudo-classes also select elements by index value, but the selection is limited to a specific type. For example, you need to select the fifth p tag or even h2 tags.

    There are five such pseudo-classes, whose names are the exact opposite of their untyped counterparts:

    nth-last-of-type()

    There is a fine line between them and child index pseudo-classes. The entry p:nth-child(5) finds only the fifth tag p, while the entry p:nth-of-type(5) finds all tags p and selects the fifth one.

    Let's create another document. It also has 20 elements, only some are p tags and others are divs. p tags with rounded corners, see screenshot below.

    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 a gray outer border of 3px thickness for the table */ 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

    , 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. Example of hiding an empty table cell

    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.

    EmployeeSalaryBonusSupervisor
    Stephen C. Cox$300$50Bob
    Josephine Tan$150-Annie
    Joyce Ming$200$35Andy
    James A. Pentel$175$25Annie
    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 is enough to choose a good color scheme, and then set the background color for all cells. Don't forget to emphasize the difference between 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; color: #669; border-top: 1px solid transparent; padding: 8px; ) 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; ) th ( font-size: 13px; font-weight: normal; background: #e8edff; border-right: 1px solid #9baff1; border- left: 1px solid #9baff1; color: #039; padding: 8px; ) td ( background: #e8edff; border-right: 1px solid #aabcfe; border-left: 1px solid #aabcfe; color: #669; padding: 8px ; )

    4. Horizontal zebra

    The zebra table looks quite attractive and comfortable. An additional background color 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; ) td ( color: #669; border-right: 1px dashed #6cf; padding: 10px 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; padding: 10px 12px; background: rgba(51, 51, 153, .2); transition: .3s; ) tr:hover td ( background: rgba(51, 51, 153, .1); )

    Publications on the topic