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

Today, I will talk to you about how to use css to set up the attached code for the border setting of the form. Many people may not know much about it. In order to make you understand better, the editor has summarized the following contents for you. I hope you can get something according to this article.

Web pages often have such a table layout border, to share with you to see the effect map to see the effect, let's study how to achieve it, for you to understand the basic process of html+css table layout.

1. First, html creates a new file and defines three tr tags.

Number name Hotline 1 JAK 1545122 2 ROSE 30420

Code effect

2, use to achieve "table layout" because the height of cells in the same row in the table is always the same, so "table layout" can avoid "bottom misalignment" when "floating layout".

Number name Hotline 1 JAK 1545122 2 ROSE 30420

Code effect

3, decorate the table using the css selector tab for style initialization, add the border border property set to the width of the line 1px solid line and add the color setting to red.

4, the tab selector style add size using width width of 300px; add a table to it with table-layout settings or retrieve the table layout algorithm, value: auto, syntax for "table-layout: auto", fixed layout algorithm, value: fixed, syntax for "table-layout: fixed".

.tab {border: 1px solid red; width: 300px; table-layout: auto; / * fixed layout algorithm * / table-layout: fixed;}

5. Add a border border property to the two definitions "th and td" with the tab selector set to a solid line with a width of 1px and add a color setting to black.

.tab th, .tab td {border: 1px solid black;}

Code effect

Ok, edit the code complete!

Complete code

.tab {border: 1px solid red; width: 300px; table-layout: auto; / * fixed layout algorithm * / table-layout: fixed } .tab th, .tab td {border: 1px solid black } numbered name Hotline 1 JAK 1545122 2 ROSE 30420 finish reading the above content Do you have any further understanding of how to use css to make table border settings with attached codes? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

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.