Formatting properties in CSS


In the previous CSS lesson, readers read along with Taimienphi.vn to learn about link properties in CSS. In the next lesson, Taimienphi.vn will introduce you more about the table format attribute (CSS) in CSS.


Formatting properties in CSS

Refer to the following article of Taimienphi.vn to learn the table format properties in CSS. Also readers can refer to some other posts already on Taimienphi.vn to learn more Font properties in CSS.

Table of Contents:
1. Border attribute
2. The border-collapse property
3. Width and height attributes
4. Text-align attribute
5. Vertical-align attribute
6. Table Padding property
7. The border-bottom attribute
8. Selector: hover in table format in CSS
9. Create striped tables in CSS
10. Set the background color for the board
11. Create Responsive Table
12. Format table properties in CSS

Formatting properties in CSS

1. Border attribute

To create borders for the table in CSS, we use properties border.

For example:

essence is currently in css

The output will look like the following:
Under the influence of state in CSS 2

Note: in the example above we use double borders. This is because table elements correspond to tags: th and td both have borders.

2. The border-collapse property

The border-collapse property in CSS is used to determine if table borders are combined into a single border.

For example:

under nutrition conditions in css 3

The output will look like the following:
under nutrition conditions in css 4

If we just want to create a border around the entire table, we specify the attribute border for “table” tag:

For example:

under nutrition status in css 5

The output will look like the following:
under nutrition conditions in css 6

3.The width and height attributes

To set the width and height of the table, we use the properties width and Cao.

For example: In the example below we set the width of the table to 100% and the height of the “th” element elements to 50px:

under nutrition conditions in css 7

The output will look like the following:
under the influence of state in css 8

4. Text-align attribute

Properties text-align Align the content in the element “th” tag or “td” tag horizontal. The values โ€‹โ€‹of these properties can be left, right or center.

Default content of the element “th” tag whose value is the center and the content of the element “td” tag valued as left.

For example: The following example aligns the text in the “th” tag elements:

under nutrition conditions in css 9

The output will look like the following:
under nutrition conditions in css 10

5. Vertical-align attribute

Properties vertical-align Align the contents of the “th” or “td” tags vertically.

By default, the content of the vertically aligned table has middle values โ€‹โ€‹(for both “th” and the tag elements) “td”).

For example:

Under the influence of nature in CSS 11

The output will look like the following:under the authority of state css 12

6. Table Padding property

To control the distance between lines and content in a table, we use the padding attribute in the elements “td” tag and “th” tag.

For example:

under the influence of nature in css 13

The output will look like the following:under the influence of nature in css 14

7. The border-bottom attribute

Add properties border-bottom into the “th” and “td” tag elements for the horizontal line.

For example:

under the authority of state css 15

The output will look like the following:Under the influence of state in CSS 16

8. Selector: hover in table format in CSS

Use the selector : hover in the “tr ” to highlight rows when a user hovers over the mouse.

For example:

Under the influence of state in CSS 17

The output will look like the following:under the influence of state in css 18

9. Create striped tables in CSS

To create striped tables in CSS, we use the nth-child () selector and add background-color to even (or odd) rows in the table.

For example:

under the state authority in css 19

The output will look like the following:under the authority of state css 20

10. Set the background color for the board

For example:

The following example illustrates the background color and text color settings for the “th” tag elements.

under the influence of state in css 21

The output will look like the following:under the authority of state administration css 22

11. Create Responsive Table

Responsive Table will display horizontal scroll bar if the screen size is too small compared to the content of the table.

Add container elements (such as div tags) along overflow-x: auto around the “table” tag element to create Responsive Table.

For example:

under the authority of state administration css 23

The output will look like the following:under the authority of state css 24

12. Format table properties in CSS

The following is a list of the table format attributes in CSS:under the authority of state css 25

Property Description

border Set all border properties in a declaration.

border-collapse Specifies whether to include the borders in the table or not.

border-spacing Specifies the distance between the borders of adjacent cells.

caption-side Specifies the position of the caption table.

empty-cells Specifies whether to display the border and the background color on empty cells in a table.

table-layout Sets the layout used in a table.

https://thuthuat.taimienphi.vn/thuoc-tinh-dinh-dang-bang-rong-css-49679n.aspx
The above lesson Taimienphi.vn has just introduced you to table formatting properties in CSS. In the next CSS lessons Taimienphi.vn will introduce you further Text property in CSS Please.

.

Add a Comment

Your email address will not be published. Required fields are marked *