如何在 HTML 5 中创建带有简单边框的表格 [英] How to create table with simple border in HTML 5
问题描述
在HTML 5 中获得如下表格的最简单方法是什么?我有一种感觉，我的解决方案(为每个 td 设置样式)并不是最好的方法.
What is the easiest way to get such table as bellow in HTML 5. I have a feeling that my solution (with setting style for every td) is not the best way.
<table style="border-collapse: collapse; border: 1px solid;">
<tr>
<td style="border: 1px solid;">1</td>
<td style="border: 1px solid;">2</td>
</tr>
<tr>
<td style="border: 1px solid;">3</td>
<td style="border: 1px solid;">4</td>
</tr>
</table>推荐答案
最好通过使用内部 CSS 样式表，而不是在表格元素上使用内联样式来实现.以下是如何使用 CSS 样式表来设置表格样式的示例.
What you are trying to do is best accomplished by using an internal CSS stylesheet, rather than using inline styles on your table elements. Following is an example of how you can use a CSS stylesheet to style your table.
首先，给表格一个 id 像这样:
First, give the table an id like this:
<table id="thetable" border="1">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
然后在表格上使用CSS:
Then use CSS on the table:
#thetable {
border-collapse: collapse;
border: 1px solid;
}
#thetable td {
border: 1px solid;
}
整个 HTML 文档看起来像这样:
The entire HTML document would look something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Table Page</title>
<style>
#thetable {
border-collapse: collapse;
border: 1px solid;
}
#thetable td {
border: 1px solid;
}
</style>
</head>
<body>
<table id="thetable" border="1">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</html>
这里有一个教程，介绍如何使用一个样式表.祝你好运！
Here is a tutorial on how to get the CSS into your HTML using a stylesheet. Good luck!
这篇关于如何在 HTML 5 中创建带有简单边框的表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
