Home >Web Front-end >CSS Tutorial >How to use css to create beautiful tables? 【Example】
How to use css to create beautiful tables? 【Example】
- 藏色散人Original
- 2018-09-05 14:57:277474browse
This article will give you a detailed introduction on how to use css to create a beautiful and concise HTML table. I believe that after everyone has been exposed to HTML-related knowledge, they will more or less write some small code by themselves to create small effects. For example, when we browse various websites, we can always see various table displays, some of which are traditional tables with no style at all. Some have distinctive display forms.
For newbies, you can still create tables without having any experience with CSS, but such tables are boring. Now let me share with you a very beautiful and concise table made with CSS style.
div css The specific code examples for making good-looking tables are as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用css制作的一款好看表格样式示例</title>
<style>
#t1
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:100%;
border-collapse:collapse;
}
#t1 td, #t1 th
{
font-size:1em;
border:1px solid #1094f2;
padding:3px 7px 2px 7px;
}
#t1 th
{
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color: #029789;
color:#ffffff;
}
#t1 tr.alt td
{
color:#000000;
background-color: #94ef9a;
}
</style>
</head>
<body>
<table id="t1">
<tr>
<th>姓名</th>
<th>性别</th>
<th>爱好</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>唱歌</td>
</tr>
<tr class="alt">
<td>李四</td>
<td>女</td>
<td>跳舞</td>
</tr>
<tr>
<td>王二</td>
<td>男</td>
<td>看书</td>
</tr>
<tr class="alt">
<td>赵五</td>
<td>男</td>
<td>爬山</td>
</tr>
</table>
</body>
</html> We access the above code through the browser, and the effect is as follows:
As shown in the picture, isn’t it much better looking than the boring black and white line table? It's simple and beautiful. Every other row displays a different color background, and the table border is displayed with thin lines. It allows users to check the information in the form more intuitively. To achieve such an effect, you cannot do without powerful CSS style attributes.
Here we can find some important attributes in the style style, such as:
border-collapse:collapse; This attribute indicates that the table borders can be merged into a single border.
background-color is to set the background color.
So through the above introduction, do you know more about using CSS to create tables? In this way, you can set CSS table styles with different effects according to your own aesthetic preferences. A good-looking table not only makes users like it, but also makes management more intuitive and convenient.
This article has certain reference value, I hope it will be helpful to friends in need!
The above is the detailed content of How to use css to create beautiful tables? 【Example】. For more information, please follow other related articles on the PHP Chinese website!