Cleverly use css code to create a rounded table-CSS Tutorial-php.cn

Cleverly use css code to create a rounded table

小云云

Release： 2017-11-16 16:15:42

Original

2600 people have browsed it

We all know that CSS is a cascading style sheet (English full name: Cascading Style Sheets), which is used to express HTML (an application of the Standard Universal Markup Language) or XML (a subset of the Standard Universal Markup Language) Computer language for file formats. CSS can not only statically modify web pages, but can also cooperate with various scripting languages to dynamically format various elements of web pages.

So today I will teach you a little trick to use css code to create a rounded table. Of course, you can also create a rounded div.

The effect is as shown below:

Cleverly use css code to create a rounded table

<html xmlns="http://www.phpernote.com">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS打造圆角Table</title>
<style type="text/css">
div.RoundedCorner{background:#9BD1FA;width:260px;}
b.rtop, b.rbottom{display:block;background:#FFF}
b.rtop b, b.rbottom b{display:block;height:1px;overflow:hidden; background:#9BD1FA}
b.r1{margin:0 5px}
b.r2{margin:0 3px}
b.r3{margin:0 2px}
b.rtop b.r4, b.rbottom b.r4{margin:0 1px;height:2px}
</style>
</head>
<body>
    <div class="RoundedCorner">
        <b class="rtop">
            <b class="r1"></b>
            <b class="r2"></b>
            <b class="r3"></b>
            <b class="r4"></b>
        </b>
        <table style="width:100%;height:100px;">
            <tr>
               <td>单元格1</td>
               <td>phpernote.com</td>
            </tr>
            <tr>
               <td>单元格3</td>
               <td>单元格4</td>
            </tr>
        </table>
        <b class="rbottom">
            <b class="r4"></b>
            <b class="r3"></b>
            <b class="r2"></b>
            <b class="r1"></b>
        </b>
    </div>
</body>
</html>

Copy after login

CSS can perform pixel-level precise control of the layout of element positions in web pages, supports almost all font sizes and styles, and has The ability to edit web object and model styles. Whether we are learning front-end or back-end, we all need to master basic css knowledge. I hope the above small tutorial on creating rounded tables with css will be helpful to everyone.

Related recommendations:

css3 simple graphic drawing tutorial

Example of how to implement text color gradient in CSS

An example of how to use CSS to realize circular motion of a small ball

The above is the detailed content of Cleverly use css code to create a rounded table. For more information, please follow other related articles on the PHP Chinese website!