Table and form are two important elements in a webpage. This time we will talk about how to set the table and form style in CSS. Let's take a look at how CSS controls the table.
First, mark in the Table: Let's take a look at the Code:
<HTML>This is an input table of the year. In the body part, a table Mark starts to represent the entire table, a caption indicates the title of a table, and TR indicates the row of a table, th indicates the very important first row of a table, and th indicates the vertical and important row of the table. The TD table contains cells one by one. Let's take a look at the results, you will understand.
These tags: TR, th, and TD are indispensable elements in the table.
The table is very elegant. We just want to mark the table. How does CSS control the color of the table? Let's take a look at the code.
<HTML>In the table, a class = "datalist" is used to define the CSS of the entire table. The background color and alignment of the body are set; datalist sets the table text color, table background color, and table font. datalist caption sets the title ...... Let's take a look at the effect:
For a large amount of data, the table has many rows and many columns. If each row of the table adopts the same color, for those who face the display for a long time, data is often not found. The problem can be solved by changing the color of the line. We can see this effect:
The following shows the code displayed in the line:
<HTML>Both the odd and even rows are written in the body. The attribute values are not described here. It is worth mentioning that altrow here. If this attribute is set, it will overwrite his father's color, instead, it uses its own color, which achieves the effect of changing the color of the line.
Then let's take a look at how CSS controls the form: Code<HTML>The body is a form. It starts with the form sign. There are input boxes, drop-down menus, single options, check boxes, text input boxes, and buttons in it, we can see the following results:
The code in CSS is the same as that mentioned earlier.
Let's take a look at the text button.
Let's take a look at the effect:
Next, let's take a look at how the code achieves this effect,
<HTML>In fact, our border-bottom is set to 1px, and other border-top, border-left, and border-right borders are set to 0. set a color and background color to implement this button. This button sets the four borders to 0 and the background color to transparent to implement buttons like text. We can see that CSS is cleverly used, it can achieve many unexpected results.
Excel sheet is a software that is very popular in office software, and we simulate it on the webpage. Let's first look at the display effect:
We can enter anything as freely as excel in the office, without any complicated input boxes. Let's take a look at this Code:
<HTML>Let's talk about the idea of how to achieve this effect. First, the body is built with a table, and the form is nested in the Table. Each item has an ID and a name. The last button is the CSS code. In the table, we set the border of the TD cell. For the input text box, we set its border to none, in this way, the input border is canceled, and the border of the table is replaced, thus achieving such a trick. Through this example, we can see that the clever setting of CSS can achieve many unexpected results.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
