How is the content in the CSS table centered? Introduction to Text styles in CSS tables

Source: Internet
Author: User
Do you know how the CSS table content is centered? Do you know how the text of a CSS table is designed to align Left? Do you know how CSS tables are set to align right? These are all in this article waiting for you to learn.

First, let's first describe how the content in the CSS table is centered:

Let's start by introducing a property that will allow the table to be centered in the CSS style.

text-align : This property sets the horizontal alignment of the text.

Let's go into a complete example:

<!doctype html><html><head><meta charset= "Utf-8" ><title>topic.alibabacloud.com< /title><style type= "Text/css" >table,td{text-align:center;border-style:solid}</style></head ><body><table style= "width:200px;height:150px" ><tr><td>11</td><td>22< /td></tr><tr><td>22</td><td>44</td></tr></table></body ></html>

This effect should be more clear, so let's look at the display in the browser:

It is not obvious, of course, the inside of the red box is my time to draw, do not care about these details. Let's see if these texts are displayed in the middle. The effect is still obvious, so our first test was successful.

Now let's look at the second one:

What is the second, is that our text should not have only one center of the function bar, Text-align property There are other two values, respectively:

    • Text-align:right: Right-aligned function, will appear on the right side of the effect, and so on to see the example

    • Text-align:center: The center of the attribute will not have to say it, has just been tested.

    • Text-align:left: Left-aligned function, the display of the effect will be displayed on the left, this is the effect of the default text, usually few people to set this. The default is this, then you set what to do, waste space. (To learn more about CSS properties, go to the Topic.alibabacloud.comcss Reference manual section)

Now we have to go into an example, this time said the above three together code:

<!doctype html><html><head><meta charset= "Utf-8" ><title>topic.alibabacloud.com< /title><style type= "Text/css" >table,td{border-style:solid;}. Zuo_1{text-align:left;}. You_1{text-align:right;}. Zhong_1{text-align:center;} </style></head><body><table style= "width:200px;height:150px" ><tr class= "Zuo_1" > <td>11</td><td>22</td></tr><tr class= "You_1" ><td>22</td><td >44</td></tr><tr class= "Zhong_1" ><td>33</td><td>66</td></tr> </table></body></html>

This is a complete code, above the three direction of all added a class name, now they three have a different direction, feel all run off, although looking not the same, but the meaning can be clearly displayed. Let's look at the results together:

, see, the first one is equivalent to the default on the left, second on the right, and the third in the middle. The effect is still very obvious, this is the use of our text-align attribute, want to see more recommended TOPIC.ALIBABACLOUD.COMCSS Study Manual section of the study.

This article about the properties of the text-align to the end of this, the students have problems can be in the bottom of my message to ask questions.

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.

Tags Index: