什么时候创建博客文章或web页面,您可能想要包括我的数据sn’t best represented by text. Say you want to display a breakdown of the diversity of your workforce or a summary at the end of a comparison blog post. Since this data would be too complicated or detailed to simply write out, you could use tables to organize and present it.
In this post, we'll go over everything you need to know about the HTML table element, including:
- 为什么在HTML中制作桌子
- how to make a basic table in HTML
- how to edit
- 如何使表单元格跨越多列
- how to center a table
- how to change the font size of a table cell
- how to create a table within a table
Why Make a Table in HTML
表允许读者一目了然地看到结果或结论,而不是浏览文本以找到数字数据或关键点。以这种方式使帖子或页面更具可读性可以帮助吸引和使访问者在您的网站上,最终最终改善他们的用户体验。
这就是为什么我们在Hubspot博客上使用表。下面是一张桌子的桌子SiteGround vs. HostGator Review, which summarizes the 2,000-word article in less than 200 words.
在CMS集线器中的按钮单击时,您还可以使用HTML和CSS从头开始制作桌子。让我们使用不同的示例浏览以下过程。
How to Make a Table in HTML
To make a table in HTML, use the
, and | tags.
|
---|
Here’s how that would look on the front end:
Let’s say you’d like to change the width of only one column, like the column containing email addresses. Instead of adding internal CSS to the head section of your HTML file, you could simply add a style attribute to the third
Here’s how that would look on the front end:
In addition to changing the column width of an HTML table, you can make a cell span multiple columns. Let's look at how.
htmlTable Column Span
在某些情况下,单元格跨越多列是有意义的。例如,标题为一组列的标题单元应跨越一个列。
为了使单元跨度多一列,您可以使用ColSpan属性。只需将其添加到表标头(或表单元格)的开头标签中,然后将其设置为要跨度的列数即可。
For the example below, let’s say you’d like to add both the cell and home phone number of your staff members to the table. In that case you'd add new
Note: we'll use the same CSS from the example above.
Here's how the HTML would look:
<表>
名称 Job Title 电子邮件地址 Telephone Anna Fitzgerald Staff Writer example@company.com 888-888-880 888-888-881 John Smith 营销经理 example2@company.com 888-888-882 888-888-883 Zendaya Grace 首席执行官 example2@company.com 888-888-884 888-888-885
Here’s how that would look on the front end:
Now that you’ve changed the padding, column width, alignment, and more of your table, you might be looking for a few more ways to make your table stand out on the page. One way is to change the background color of not just the header but the whole table. Let’s go over how.
编辑表背景颜色
To change the background color of the whole table, not just the table header, then you simply define the CSS background color property for both the table header and table data elements. Here’s how your CSS would look:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
background-color: #FDDF95;
}
Here's how the HTML would look:
<表>
名称 Job Title 电子邮件地址 Anna Fitzgerald Staff Writer example@company.com John Smith 营销经理 example2@company.com Zendaya Grace 首席执行官 example2@company.com
Here’s how that would look on the front end:
如果您希望表标头和表数据元素具有不同的背景颜色,则只需使用两个元素选择器“ th”和“ td”,然后将背景颜色属性设置为不同的十六进制颜色代码或颜色名称。
Here’s what the CSS might look like:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
th {
background-color: #FFB500;
}
td {
background-color: #FDDF95;
}
The HTML stays the same.
Here’s how that would look on the front end:
Another way you can make sure your table is not getting lost among other content on the page is to increase its font size. Below we’ll look at how.
html表字体大小
要更改HTML表中字体的大小,请使用CSS font-size property。您可以将此属性用于表标头和表数据元素。但是,假设您只想增加表标头的字体尺寸。
然后,您的CSS看起来像这样:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
th {
background-color: #FFB500;
font-size: 20px;
}
td {
background-color: #FDDF95;
}
您的HTML将保持不变。
Here’s how that would look on the front end:
一旦您对桌子的外观感到满意,您可能有兴趣更改其在页面上的位置。您可以做到这一点的一种方法是更改其默认对齐方式。让我们看看下面的情况。
Centering a Table In HTML
By default, elements, including the table element, will be left-aligned on the page. If you’d like to center it on the page, use the CSS margin property.
First, you’ll add a class name to the table element. In the example below, I’ll use the name “center.” Then you can use the class selector to center align the table element only. The other elements on the page will remain left aligned. Here’s how the HTML will look:
名称
Job Title
电子邮件地址
Anna Fitzgerald
Staff Writer
example@company.com
John Smith
营销经理
example2@company.com
Zendaya Grace
首席执行官
example2@company.com
You’ll then add another rule set to your CSS. Using the class selector “.center”, you’ll set the margin-left and margin-right properties to “auto.” That way, the table will take up whatever width is specified by CSS or by the content it contains and the browser will ensure the remaining space is split equally between the left and right margins.
Here’s how the CSS would look all together:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
th {
background-color: #FFB500;
font-size: 20px;
}
td {
background-color: #FDDF95;
}
。center {
margin-left: auto;
margin-right: auto;
}
Here’s how that would look on the front end:
Nesting Tables in HTML
You can nest tables — or create tables within tables — in HTML. To make a nested table, simply create another table element with table header, table row, and table data tags and place it inside any
假设我想在嵌套桌上列出工作人员的家庭和手机。
Here's how the CSS might look:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
th {
background-color: #FDDF95;
}
#Nested {
background-color: #EEEEEE;
}
Here's how the HTML might look:
<表>
名称 Job Title 电子邮件地址 Nested Table Anna Fitzgerald Staff Writer example@company.com <表>
家庭电话 手机 888-888-880 888-888-881
Here's how that would look on the front end:
Making Tables in HTML
If you want to share large amounts of data on your website, then use tables to present this data in a way that’s easy for visitors to read and understand. Any of the steps described above can help you add and customize tables to your unique website. You’ll just need to be familiar with some HTML and CSS.
Originally published May 4, 2021 7:00:00 AM, updated May 04 2021
Topics:
htmlDon't forget to share this post!
Related Articles
Expand Offer
Sign up for HubSpot's CMS Software
现在就得到