Shulou(Shulou.com)06/01 Report--

This article mainly shows you "css how to set table style", the content is easy to understand, clear, hope to help you solve doubts, the following let the editor lead you to study and learn "css how to set table style" this article.

1. A simple form

Table.html

Table style

Class Schedule

Week\ course

Monday

Tuesday

Wednesday

It's Thursday

Friday

Section 1-2

Mathematics

Chinese language

Chemistry

English

English

Section 3-4

English

Physics

Chemistry

English

Sports

Section 5-6

Mathematics

Physics

Sports

Chemistry

Fine Arts

Section 7-8

Mathematics

Fine Arts

Chemistry

English

Sports

Section 9-10

Biology

Fine Arts

Biology

English

Physics

Table.css

Table,td,th {

Border:1pxsolid#aaa

Font-size:23px

}

2. Border merge: boder-collapse

Attribute value:

Separate; (separate, default)

Collapse; (merge)

Table.css

Table,td,th {

Border:1pxsolid#aaa

Font-size:23px

Border-collapse:collapse

}

3. Frame spacing border-spacing (premise: border-collapse:separate;)

Table.css

Table,td,th {

Border:1pxsolid#aaa

Font-size:23px

Border-collapse:separate

Border-spacing:45px

}

4. Set the location of the table title caption-side

Attribute value:

Top;// default

Bottom

Left

Right

Table.css

Table,td,th {

Border:1pxsolid#aaa

Font-size:23px

Border-collapse:separate

Border-spacing:45px

Caption-side:bottom

}

5. When the width of the cell object exceeds the width defined by the cell, you can use table-layout:fixed to keep the width of the table unchanged

Attribute value: auto (default)

Fixed (fixed width)

Table.css

Table,td,th {

Border:1pxsolid#aaa

Font-size:23px

Border-collapse:separate

Border-spacing:5px

Table-layout:fixed

Caption-side:top

}

The above is all the contents of the article "how to style tables in css". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.