Home > Others

Comparison of implementation methods of three fine border tables

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞
Background settings-border table

Code:
<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en" <br/> "http://www.w3.org/TR/html4/loose.dtd"> <br/> <HTML> <br/> <pead> <br/> <title> background settings-border table </title> <br/> </pead> <br/> <body> <br/> <Table width = "200" border = "0" cellpadding = "2" cellspacing = "1" bgcolor = "#000000"> <br/> <tr> <br/> <TH bgcolor = "# ffffee" colspan = "2"> background settings-border table </Th> <br/> </tr> <br/> <tr> <br/> <TD bgcolor = "# ffffee"> text... </TD> <br/> <TD bgcolor = "# ffffee"> text... </TD> <br/> </tr> <br/> <TD bgcolor = "# ffffee"> text... </TD> <br/> <TD bgcolor = "# ffffee"> text... </TD> <br/> </tr> <br/> </table> <br/> </body> <br/> </ptml> <br/>

Webpage display effect:

Background settings-border table
Text... Text...
Text... Text...

Print the preview effect:

Border settings-border table

Code:
<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en" <br/> "http://www.w3.org/TR/html4/loose.dtd"> <br/> <HTML> <br/> <pead> <br/> <title> border settings-fine border table </title> <br/> </pead> <br/> <body> <br/> <Table width = "200" border = "1" cellpadding = "2" cellspacing = "0" bordercolorlight = "#000000" bordercolordark = "# ffffff" bgcolor = "# ffffee"> <br /> <tr> <br/> <TH colspan = "2"> border settings-border table </Th> <br/> </tr> <br/> <tr> <br/> <TD> text... </TD> <br/> <TD> text... </TD> <br/> </tr> <br/> <TD> text... </TD> <br/> <TD> text... </TD> <br/> </tr> <br/> </table> <br/> </body> <br/> </ptml> <br/>

Webpage display effect:

Border settings-border table
Text... Text...
Text... Text...

Print the preview effect:

CSS stacked-border table

Code:
<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en" <br/> "http://www.w3.org/TR/html4/loose.dtd"> <br/> <HTML> <br/> <pead> <br/> <title> CSS stacked-border table </title> <br/> <style type = "text/CSS"> <br/> <! -- <Br/>. t_sample {<br/> border-collapse: collapse; <br/> border: none; <br/> Background: # ffffee; <br/>}< br/>. t_sample Th {<br/> border: solid 1px #000000; <br/>}< br/>. t_sample TD {<br/> border: solid 1px #000000; <br/>}< br/> --> <br/> </style> <br/> </pead> <br/> <body> <br/> <Table width = "200" border = "1" cellpadding = "2" cellspacing = "0" class = "t_sample"> <br/> <tr> <br/> <TH colspan = "2"> CSS stacked-border table </Th> <br/> </tr> <br/> <TD> text... </TD> <br/> <TD> text... </TD> <br/> </tr> <br/> <TD> text... </TD> <br/> <TD> text... </TD> <br/> </tr> <br/> </table> <br/> </body> <br/> </ptml> <br/>

Webpage display effect:

CSS stacked-border table
Text... Text...
Text... Text...

Print the preview effect:

Comparison:
　 Size (bytes) Print compatibility Flexibility Reusability Complexity Comments Suitable for use
Background settings 609 × ☆ ☆ ★ This setting method may be widely used only when the Forum is on the Internet. In this way, the table line is completely invisible during printing. You must set the background color for each <TD> to modify the color. Do not need to print; To implement cell background color
Border settings 572 ☆ ★ ★ ☆ You only need to modify the <Table> attribute of a row. When printing, only the bottom side and the table line on the right side are thin lines, while the other lines are thick lines. In addition, some non-ie kernel browsers may not be supported, such as Firefox. The requirement for printing is not high; because only one row needs to be modified, it is easy to copy and use, suitable for scenarios with high usage and little color change
CSS stacked 749 ★ ★★ ★ ★☆ This setting method is used to save msoffice as an object. Print the border completely. If CSS is set, you only need to set the class attribute of each <Table> to modify it. Because of the inheritance of CSS, the style of its nested table is affected unless another class attribute is set. High requirements for printing; suitable for skin-changing Design of Large websites; but CSS style sheets are required

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More