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 within the<thead>,<tbody>or the<tfoot>element.
注意：使用<thead>，不能有任何<tr>是<table>元素的直接子级。 所有<tr>必须出现在<thead>，<tbody>或<tfoot>元素内。
Some tables have footers too. Consider a printed receipt at a supermarket where the foot of the table shows you the total 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 element 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 websites use colors and lines to distinguish elements from one another. Borders are crucial in this scenario. By default, all table elements have a border of 2px by default.
尽管标签放置异常，但<tfoot>确实会显示在表格底部。 网站上看到的大多数表格都使用颜色和线条来区分元素。 在这种情况下， 边界至关重要。 默认情况下，所有表元素的边框默认为2px 。
| Column 1 Heading | Column 2 Heading |
|---|---|
| Foot Note 1 | Foot Note 2 |
| Hello column 1 | Hello column 2 |
| 第1列标题 | 第2列标题 |
|---|---|
| 脚注1 | 脚注2 |
| 你好列1 | 你好第2列 |
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-style and border-color.
就像我们在上一教程中学到的， border-width ， border-style和border-color 。
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: If the <!DOCTYPE> is not specified, the border-collapse property can produce unexpected results in IE8 and earlier versions.注意：如果未指定<！DOCTYPE>，border-collapse属性会在IE8和更早版本中产生意外结果。
文字对齐方式和宽度与高度 (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 and width of a table are also customizable. The example below sets the width of the table to a 100% (covering 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 |
|---|---|
| Foot Note 1 | Foot Note 2 |
| Hello column 1 | Hello column 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.
vertical-align属性用于定义表格中文本的顶部，底部或中间对齐。 默认情况下，它设置为middle 。
table {
width: 100%;
}
td {
height: 40px;
}
th{
height: 40px;
vertical-align: bottom;
}| Column 1 Heading | Column 2 Heading |
|---|---|
| Foot Note 1 | Foot Note 2 |
| Hello column 1 | Hello column 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 |
|---|---|
| Foot Note 1 | Foot Note 2 |
| Hello column 1 | Hello column 2 |
| 第1列标题 | 第2列标题 |
|---|---|
| 脚注1 | 脚注2 |
| 你好列1 | 你好第2列 |
翻译自: https://www.studytonight.com/cascading-style-sheet/styling-tables
css样式表中文手册
1123
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
