HTML5 和<table> “风格”属性
[英]HTML5 and <table> “style” attribute
问题描述
I´ve just started learining this new, wonderful skill (HTML5) and everything was going smooth up untill I got to able styling.
我刚刚开始学习这项新的、奇妙的技能 (HTML5)，一切都很顺利，直到我能够设计样式。 OK, I know that CSS is made for that, but as it´sa little bit too early for me I use ´style´ attribute.好的，我知道 CSS 就是为此而生的，但因为对我来说还为时过早，所以我使用了 'style' 属性。 OK, so I wrote this simple table:好的，所以我写了这个简单的表格：
<!Doctype html>
<html lang="es-es">
<head>
<meta charset="UTF-8">
<title>First table</title>
<meta name="author" content="Kamila Bertran">
</head>
<body>
<table style=”border:1px solid #000; width:100%;”>
<caption> Gastos mensuales </caption>
<thead>
<tr>
<td style=”border:1px solid #000; width:100%;”> Producto </td>
<td style=”border:1px solid #000; width:100%;”> Unidades </td>
<td style=”border:1px solid #000; width:100%;”> Precio </td>
<td style=”border:1px solid #000; width:100%;”> Total </td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan=2 style=”border:1px solid #000; width:100%; align:center;”> Año 2014</td>
<td style=”border:1px solid #000; width:100%;”> Total</td>
<td style=”border:1px solid #000; width:100%;”> 142 </td>
</tr>
</tfoot>
<tbody>
<tr>
<td style=”border:1px solid #000; width:100%;”> Camisetas </td>
<td style=”border:1px solid #000; width:100%;”> 10 </td>
<td style=”border:1px solid #000; width:100%;”> 2 </td>
<td style=”border:1px solid #000; width:100%;”> 20 </td>
</tr>
<tr>
<td style=”border:1px solid #000; width:100%;”> Pantalones </td>
<td style=”border:1px solid #000; width:100%;”> 3 </td>
<td style=”border:1px solid #000; width:100%;”> 14 </td>
<td style=”border:1px solid #000; width:100%;”> 42 </td>
</tr>
<tr>
<td style=”border:1px solid #000; width:100%;”> Chaquetas </td>
<td style=”border:1px solid #000; width:100%;”> 4 </td>
<td style=”border:1px solid #000; width:100%;”> 20 </td>
<td style=”border:1px solid #000; width:100%;”> 80 </td>
</tr>
</tbody>
</table>
</body>
</html>
and cannot undestand why my ´style´ attribute is being completly ignored.并且无法理解为什么我的“风格”属性被完全忽略了。 Help?帮助？
3 个解决方案
解决方案1
2 已采纳 2016-09-10 17:05:49
you used ( ” ).This is wrong.You must use ( " ) Like this你用了（”）。这是错误的。你必须用（“）像这样
<tr>
<td style="border:1px solid #000; width:100%;">Camisetas</td>
<td style="border:1px solid #000; width:100%;">10</td>
<td style="border:1px solid #000; width:100%;">2</td>
<td style="border:1px solid #000; width:100%;">20</td>
</tr>
Also还有
解决方案2
1 2016-09-10 17:24:08
Its not a Good Practice to use inline styling.使用内联样式不是一个好习惯。 I have optimised the code with the use of CSS.我已经使用 CSS 优化了代码。
HTML: HTML：
<table class="tblBorder">
<caption> Gastos mensuales </caption>
<thead>
<tr>
<td class="tblBorder"> Producto </td>
<td class="tblBorder"> Unidades </td>
<td class="tblBorder"> Precio </td>
<td class="tblBorder"> Total </td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan=2 class="tblBorder center"> Año 2014</td>
<td class="tblBorder"> Total</td>
<td class="tblBorder"> 142 </td>
</tr>
</tfoot>
<tbody>
<tr>
<td class="tblBorder"> Camisetas </td>
<td class="tblBorder"> 10 </td>
<td class="tblBorder"> 2 </td>
<td class="tblBorder"> 20 </td>
</tr>
<tr>
<td class="tblBorder"> Pantalones </td>
<td class="tblBorder"> 3 </td>
<td class="tblBorder"> 14 </td>
<td class="tblBorder"> 42 </td>
</tr>
<tr>
<td class="tblBorder"> Chaquetas </td>
<td class="tblBorder"> 4 </td>
<td class="tblBorder"> 20 </td>
<td class="tblBorder"> 80 </td>
</tr>
</tbody>
</table>
</body>
</html>
CSS: CSS：
.tblBorder
{
border:1px solid #000; width:100%;
}
.center
{
align:center;
}
解决方案3
0 2016-09-10 17:59:52
<head>
<meta charset="UTF-8">
<title>First table</title>
<meta name="author" content="Kamila Bertran">
<style>
table{
border:1px solid #000; width:100%;
}
td{
border:1px solid #000; width:100%;
}
</style>
</head>
<body>
<table>
<caption> Gastos mensuales </caption>
<thead>
<tr>
<td> Producto </td>
<td> Unidades </td>
<td> Precio </td>
<td> Total </td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan=2 align="center"> Año 2014</td>
<td> Total</td>
<td> 142 </td>
</tr>
</tfoot>
<tbody>
<tr>
<td> Camisetas </td>
<td> 10 </td>
<td> 2 </td>
<td> 20 </td>
</tr>
<tr>
<td> Pantalones </td>
<td> 3 </td>
<td> 14 </td>
<td> 42 </td>
</tr>
<tr>
<td> Chaquetas </td>
<td> 4 </td>
<td> 20 </td>
<td> 80 </td>
</tr>
</tbody>
</table>
</body>
In HTML align is attribute.在 HTML 中对齐是属性。 So you can do align="center" and instead of writing inline css you can right Internal or External css with using class or HTML element name.So that line of code will get reduce.所以你可以做align="center"而不是编写内联 css，你可以使用类或 HTML 元素名称对内部或外部 css进行正确处理。这样代码行就会减少。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.