css样式表中⽂⼿册_CSS样式表
css样式表中⽂⼿册
You are quite familiar with tables in HTML (recall the <table> tag?). A table is essentially a spreadsheet, that consists of rows and columns. You will be using tables on your website more often than you think, so let's learn more about how to make them look beautiful with CSS. We shall focus on both, the CSS as well as the HTML part in this module.
您对HTML中的表格⾮常熟悉(还记得<table>标签吗？)。 表格本质上是⼀个电⼦表格，由⾏和列组成。 您在⽹站上使⽤表格的频率将超出您的想象，因此让我们进⼀步了解如何通过CSS使表格看起来更漂亮。 在本模块中，我们将集中讨论CSS和HTML部分。
The actual first row of most tables contains no data, it simply contains the titles of the columns. So wouldn't it be better that we explicitly mention this? This can be done by using the <thead> element, so that the viewer can differentiate correctly between column names and column data. It can include multiple rows of header information in it.
⼤多数表的实际第⼀⾏不包含任何数据，它仅包含各列的标题 。 那么，我们明确提及这⼀点会更好吗？
这可以通过使⽤<thead>元素来完成，以便查看器可以正确区分列名和列数据。 它可以在其中包含多⾏标题信息。
NOTE: When you use <thead>, there must be no <tr> that is a direct child of the <table> element. All <tr> must appear NOTE:
within the <thead>, <tbody> or the <tfoot> element.
注意：使⽤<thead> ，不能有任何<tr>是<table>元素的直接⼦级。所有<tr>必须出现在<thead> ， <tbody>或<tfoot>元素内。
注意：
table shows you the total footers too. Consider a printed receipt at a supermarket where the foot of the table
Some tables have footers
amount in big bold letters (as if you didn't already know how expensive the groceries are!) Anyway, the <tfoot> element is used to showcase the table footer information. Now you may expect this elem
ent to appear after the <thead> & <body> elements. However this is not the case. The <tfoot> has to be after <thead> & before the <tbody> tags. <tfoot> is used for wrapping table rows that indicate the footer of the table.
页脚 。 在超市考虑打印的收据，其中上表
表可以看出脚下，你⽤⼤号加粗字体总量(因为如果你还不知道杂货多么昂贵的！)反有些桌⼦也有页脚
正<tfoot>元素被⽤来展⽰表页脚信息。 现在，您可能希望该元素出现在<thead>和<body>元素之后。 然⽽，这种情况并⾮如此。 <tfoot>必须在<thead>之后和<tbody>标记之前。 <tfoot>⽤于包装表⽰表的页脚的表⾏。
In spite of this abnormal tag placement, the <tfoot> does actually render at the bottom of the table. Most tables seen on
Borders are crucial in this scenario. By default, all websites use colors and lines to distinguish elements from one another. Borders
table elements have a border of 2px by default.
尽管标签放置异常，但<tfoot>确实会显⽰在表格底部。 ⽹站上看到的⼤多数表格都使⽤颜⾊和线条来区分元素。 在这种情况下， 边界
边界⾄关重要。 默认情况下，所有表元素的边框默认为2px 。
Column 1 Heading Column 2 Heading
Hello column 1Hello column 2
Foot Note 1Foot Note 2
第1列标题第2列标题
你好列1你好第2列
脚注1脚注2
css表格样式Here is the HTML code for above table:
这是上表HTML代码：
<table id="table-style-1">
<thead>
<tr>
<th>Column 1 Heading</th>
<th>Column 2 Heading</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Foot Note 1</td>
<td>Foot Note 2</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Hello column 1</td>
<td>Hello column 2</td>
</tr>
</tbody>
</table>
To specify table borders, we use the border property of the table.
要指定表格边框，我们使⽤表格的border属性。
#table-style-1{
border: 0.5px solid black;
}
Just like we learnt in the last tutorial, border-width
border-color.
border-style and border-color
border-width, border-style
border-color 。
border-style和border-color
border-width ， border-style
就像我们在上⼀教程中学到的， border-width
The above example modifies the border of the said table element to 0.5px with solid black. But consider the following example,
上⾯的⽰例使⽤纯⿊⾊将所述表格元素的边框修改为0.5px 。 但请考虑以下⽰例，
table, th, td{ border: 1px solid black; }
In the above example, the table will have double borders due to both <th> and <td> having different borders. If you want to display a single border, use the border-collapse property as follows.
在上⾯的⽰例中，由于<th>和<td>具有不同的边框，所以该表将具有双边框。 如果要显⽰单个边框，请按以下⽅式使⽤border-collapse属性。
table{
border-collapse:collapse;
}
table, th, td {
border: 1px solid black;
}
Go ahead and try this to see how the table looks with and without the property border-collapse.
继续尝试此操作，以查看带有和不带有属性border-collapse的表的外观。
Note:
Note: If the <!DOCTYPE> is not specified, the border-collapse property can produce unexpected results in IE8 and 注意：如果未指定<！DOCTYPE>，border-collapse属性会在IE8和更早版本中产⽣意外结果。
earlier versions.注意：
⽂字对齐⽅式和宽度与⾼度 (Text Alignment and Width & Height)
You can also change the horizontal text alignment in a table column. This is done by text-align property with which we are already familiar with.
您还可以在表格列中更改⽔平⽂本对齐⽅式。 这是通过我们已经熟悉的text-align属性完成的。
The data in <th> element is by default center-aligned and the data in <td> is by default left-aligned. But we can change them, whenever we want.
默认情况下， <th>元素中的数据居中对齐 ，默认情况下<td>的数据左对齐 。 但是我们可以随时更改它们。
th{ text-align: left; }
The height
width of a table are also customizable. The example below sets the width of the table to a 100% (covering height and width
entire width of the page) and height of the header row to 80px.
宽度也可以⾃定义。 下⾯的⽰例将表的宽度设置为100% (覆盖页⾯的整个宽度)，并将标题⾏的⾼度设置为80px 。
⾼度和宽度
桌⼦的⾼度
table {
width:100%;
}
th, td {
height: 40px;
}
Column 1 Heading Column 2 Heading
Hello column 1Hello column 2
Foot Note 1Foot Note 2
第1列标题第2列标题
你好列1你好第2列
脚注1脚注2
垂直⽂字对齐 (Vertical Text Alignment)
The vertical-align property is used to define the top, bottom or middle alignment of text in a table. By default, this is set to middle.
middle
middle 。
vertical-align属性⽤于定义表格中⽂本的顶部，底部或中间对齐。 默认情况下，它设置为middle
table {
width: 100%;
}
td {
height: 40px;
}
th{
height: 40px;
vertical-align: bottom;
}
Column 1 Heading Column 2 Heading
Hello column 1Hello column 2
Foot Note 1Foot Note 2
第1列标题第2列标题
你好列1你好第2列
脚注1脚注2
⽂字颜⾊和背景颜⾊ (Text Color and Background Color)
You can set the text color and the background color of the table using the properties color and background-color. The border colors can also be specified using the border property.
您可以使⽤属性color和background-color设置表格的⽂本color和背景颜⾊ 。 边框颜⾊也可以使⽤border属性指定。
td{
background-color: #EEEEEE;
color: blue;
border: 1px solid red;
}
Column 1 Heading Column 2 Heading
Hello column 1Hello column 2
Foot Note 1Foot Note 2
第1列标题第2列标题
你好列1你好第2列
脚注1脚注2
css样式表中⽂⼿册

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。