example2raybet电子竞技@company.com
这是表格如何在网站的前端看：
请注意，每个列都足够宽，以符合文本，并且没有边框从下一个分隔一个列或行。结果是杂乱无章的，难以阅读。 下面我们会查看某种方式，您可以更轻松地使此表格更易于阅读。 编辑表边框默认情况下，表没有任何边界。要添加边框，请使用CSS border属性。 假设我想在上面的表格周围添加一个简单的黑色边框。然后，我只需要在HTML文件的标题部分或外部样式表中添加以下CSS。
表，th, td {
边框：1PX固体黑色;
}
HTML文件的主体部分中的HTML将保持不变。 这是它在前端的样子:
请注意，表中的边框，表格标题和表格单元格彼此分开。要折叠它们，请使用CSS边框折叠属性。您只需将此属性添加到CSS规则集，并将值设置为“崩溃”。以下是您的CSS现在如何看：
表，th, td {
边框：1PX固体黑色;
border-collapse:崩溃;
}
同样，HTML保持不变。 这是它在前端的样子:
添加边框已经帮助使此表格更轻松地阅读 - 但它仍然看起来很拥塞。让我们看看我们如何为此表添加更多空白空间。 编辑表格填充如上所述，默认情况下，表的大小取决于其内容所需的大小。因此，第二步是在表格单元格内的内容周围添加更多的空间。为此，使用CSS填充物业。 由于Padding指定了单元格内容和边框之间的空间，因此只需要将填充添加到表标题和表数据元素，而不是表元素本身。这意味着您将创建一个只使用两个的新CSS规则集CSS选择器：th和td。然后，您将CSS Padding属性设置为您想要的任何值。下面我将它设置为10px。 下面是CSS的样子:
表，th, td {
边框：1PX固体黑色;
border-collapse:崩溃;
}
th, td {
填充：10px;
}
HTML保持不变。 这是它在前端的样子:
现在桌子看起来好多了，但我们可以通过将标题与其他单元格区展出来来改进它。让我们来看看以下。 编辑表标题要使表头突出，你可以做一些简单的事情，比如给这些单元格添加背景色。你只需要使用元素选择器“th”将唯一的样式属性应用到头文件。 下面，您将使用与上面的相同的CSS使用相同的CSS，但添加包含的第三个规则集CSS background属性。然后，您可以使用a将属性设置为特定颜色值十六进制颜色代码。对于此示例，我将使用Hex颜色代码进行柔和的黄色。 这是CSS：
表，th, td {
边框：1PX固体黑色;
border-collapse:崩溃;
}
th, td {
填充：10px;
}
{
背景颜色：＃fddf95;
}
这是它在前端的样子:
这张桌看起来更好，更好！现在让我们说你想要刹车而不是一行。我们会看看以下情况。 编辑表列宽度如果您必须猜测如何设置列的样式，您可能会认为必须向每行的单元格添加一个样式属性。这很令人沮丧，对吧?好消息是你不需要这raybetapp么做。 您可以使用 标记。此标记指定表中的一个或多个列组，以便您可以将CSS应用于列而不是单元格。要创建此组，您将添加 标记到HTML文件的正文部分。在此标记中，您将为您的表中的每列添加标记，或者您想要样式的每列。这是HTML代码的样子：
然后，可以使用CSS定位这组列。假设您不想只指定内边距(即单元格内容与其边框之间的空间)，还想指定每个列的宽度。然后，您可以在CSS中添加另一个规则集，并定义width属性。 以下是CSS如何看：
表，th, td {
边框：1PX固体黑色;
border-collapse:崩溃;
}
th, td {
填充：10px;
}
{
背景颜色：＃fddf95;
}
colgroup{指定表格中
宽度：250px;
}
以下是HTML的样子：
<表>
name
< th >头衔< / th >
| 电子邮件地址
|
|---|
Anna Fitzgerald
| 员工写道
道明> < examplraybet电子竞技e@company.com td > < /
|
约翰。史密斯< td > < / td >
营销经理
| example2raybet电子竞技@company.com
|
zendaya grace
| CEO
| example2raybet电子竞技@company.com
这是它在前端的样子:
假设您想更改只有一列的宽度，如包含电子邮件地址的列。您可以简单地将样式属性添加到HTML文件的Head部分，而不是将内部CSS添加到HTML文件的Head部分中。在该属性中，您可以添加并指定Width属性。以下是 标记将如何看：
<坳风格= "宽度:300 px”>
这是它在前端的样子:
除了更改HTML表的列宽之外，您还可以使单元格跨度多列。让我们看看如何。 HTML表列跨度在某些情况下，单元格跨越多个列是有意义的。例如，标题一组列的标题单元应跨越多个列。 要使单元格跨越多个列，您可以使用Colspan属性。只需将其添加到表格标题（或表格单元格）的开口标记，并将其设置为您希望其跨度的列数。 对于下面的示例，假设您希望将员工的手机和家庭电话号码添加到表中。在这种情况下，您可以添加新的 标签，并将colspan属性设置为“2”。然后，将另外两个包含员工电话号码的 | 标记添加到每一行。 注意：我们将在上面的示例中使用相同的CSS。 以下是HTML的样子： <表>
| name < th >头衔< / th > | 电子邮件地址 | 电话 |
|---|
| Anna Fitzgerald | 员工写道 道明> < examplraybet电子竞技e@company.com td > < / | 888-888-880 | 888-888-881 | 约翰。史密斯< td > < / td > 营销经理 | example2raybet电子竞技@company.com < td > 888-888-882 < / td > | 888-888-883 | | zendaya grace | CEO | example2raybet电子竞技@company.com < td > 888-888-884 < / td > | 888-888-885
这是它在前端的样子: 
既然你改变了填充，列宽度，对齐等，您可能正在寻找更多方法来使您的桌子脱颖而出。一种方法是改变不仅仅是标题而是整个表的背景颜色。让我们答应如何。 编辑表背景颜色要更改整个表的背景颜色，而不仅仅是表标题，那么您只需为表格标题和表数据元素定义CSS背景颜色属性。以下是您的CSS将如何看：
表，th, td {
边框：1PX固体黑色;
border-collapse:崩溃;
}
th, td {
填充：10px;
背景颜色：＃fddf95;
}
以下是HTML的样子： <表>
<坳风格= "宽度:300 px”> | name < th >头衔< / th > | 电子邮件地址 |
|---|
| Anna Fitzgerald | 员工写道 道明> < examplraybet电子竞技e@company.com td > < / | 约翰。史密斯< td > < / td > 营销经理 | example2raybet电子竞技@company.com | | zendaya grace | CEO | example2raybet电子竞技@company.com
这是它在前端的样子:
如果您希望表格标题和表数据元素具有不同的背景颜色，则只需使用两个元素选择器，“th”和“td”，并将背景颜色属性设置为不同的十六进制颜色代码或颜色名称。 这是CSS可能看起来的样子：
表，th, td {
边框：1PX固体黑色;
border-collapse:崩溃;
}
th, td {
填充：10px;
}
{
background - color: # FFB500;
}
td {
背景颜色：＃fddf95;
}
HTML保持不变。 这是它在前端的样子:
另一种方式您可以确保您的表格在页面上的其他内容中不会丢失是增加其字体大小。下面我们会看看如何。 HTML表字体大小要更改HTML表中字体的大小，请使用CSS字体大小属性。您可以将此属性用于表格标题和表数据元素。但是，假设您只想增加表格标题的字体大小。 那么你的CSS会如下所示：
表，th, td {
边框：1PX固体黑色;
border-collapse:崩溃;
}
th, td {
填充：10px;
}
{
background - color: # FFB500;
字体大小:20 px;
}
td {
背景颜色：＃fddf95;
}
你的HTML会保持不变。 这是它在前端的样子:
一旦您对桌面的外观感到满意，您可能有兴趣在页面上更改其位置。您可以通过更改其默认对齐方式来实现这一点。让我们来看看以下。 在HTML中将表格居中缺省情况下，将在页面上左对齐，包括表元素，包括表元素。如果您希望将其驻留在页面上，请使用CSS边缘属性。 首先，您将向table元素添加一个类名。在下面的例子中，我将使用名称“center”。然后，您可以使用类选择器只对表元素居中。页面上的其他元素将保持左对齐。以下是HTML的外观:
<表类= "中心" >
<坳风格= "宽度:300 px”>
name
< th >头衔< / th >
| 电子邮件地址
|
|---|
Anna Fitzgerald
| 员工写道
道明> < examplraybet电子竞技e@company.com td > < /
|
约翰。史密斯< td > < / td >
营销经理
| example2raybet电子竞技@company.com
|
zendaya grace
| CEO
| example2raybet电子竞技@company.com
然后，您将添加另一个规则集到CSS。使用类选择器“.center”，您将将边距和边缘正确的属性设置为“自动”。这样，表将占用CSS指定的宽度或其包含的内容，并且浏览器将确保剩余空间在左侧和右边缘之间平均分割。 下面是CSS的整体外观: 表，th, td { 边框：1PX固体黑色; border-collapse:崩溃; } th, td { 填充：10px; } { background - color: # FFB500; 字体大小:20 px; } td { 背景颜色：＃fddf95; } .center { 边缘 - 左：自动; margin-right:汽车; }
这是它在前端的样子:
HTML嵌套表您可以嵌套表格 - 或在HTML中创建表中的表。要制作嵌套表，只需创建另一个表元素，具有表头，表行和表数据标记，并将其放在现有表的任何 | 标记内。 假设我想在嵌套的表中列出员工的家庭和手机。 以下是CSS如何看的： 表，th, td { 边框：1PX固体黑色; border-collapse:崩溃; } th, td { 填充：10px; } { 背景颜色：＃fddf95; } ＃数{ 背景颜色：#eeeeee; }
以下是HTML可能看的： <表> | name < th >头衔< / th > | 电子邮件地址 | 嵌套表 |
|---|
| Anna Fitzgerald | 员工写道 道明> < examplraybet电子竞技e@company.com td > < / | <表> | | 家庭电话 | 手机 |
|---|
| 888-888-880 | 888-888-881
这是它在前端的样子: 
在HTML中制作表格如果您想在您的网站上分享大量数据，请使用表以容易阅读和理解的访问者提供此数据。上述任何步骤都可以帮助您将表格添加和自定义到您的唯一网站。您只需要熟悉一些HTML和CSS。
最初发布于2021年5月4日早上7:00:00，更新于2021年5月4日
|
|
|
|
| |
| 
