什么时候创建博客文章或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.

While aCMSor网站构建器will offer a module to create tables with a click of a button, you can create tables from scratch with some basichtmland CSS.

Download Now: Free Intro Guide to HTML & CSS

In this post, we'll go over everything you need to know about the HTML table element, including:

Why Make a Table in HTML

表允许读者一目了然地看到结果或结论,而不是浏览文本以找到数字数据或关键点。以这种方式使帖子或页面更具可读性可以帮助吸引和使访问者在您的网站上,最终最终改善他们的用户体验

这就是为什么我们在Hubspot博客上使用表。下面是一张桌子的桌子SiteGround vs. HostGator Review, which summarizes the 2,000-word article in less than 200 words.

在HUBSPOT博客中显示HTML表

在CMS集线器中的按钮单击时,您还可以使用HTML和CSS从头开始制作桌子。让我们使用不同的示例浏览以下过程。

How to Make a Table in HTML

To make a table in HTML, use the tag. Within this table tag, you’ll place the , 标签定义了一个表行。
  • The









  • Then you’d create three more rows. Within these

    tags, you’d place








    You’d then wrap all four rows in the

    , and tags.

    • The
    tag defines the table header. By default, any text in the tag is bold and centered.
  • The
  • tag defines the table data (ie. table cells). By default, any text in the tag is unbolded and left-aligned.

    It’s important to note that the

    tag can contain a range of HTML elements — not just text. Possible elements include images, numbered or bulleted lists, and other tables.

    You can also use theBootstrap CSS framework创建时尚的桌子。查看Bootstrap CSS表元素的演练to learn how.

    htmlTable Example

    假设您正在创建一张桌子以获取员工的联系信息。您想列出三个员工中每个员工的名称,职位和电子邮件地址。在这种情况下,您需要三列和四行。

    That first row would be the header of your table. Here you’d label each column by wrapping the following text — Name, Job Title, and Email Address — in

    tags. Here’s what that code would look like:


    名称Job Title电子邮件地址
    tags containing the name, job title, and email address of each employee. Here’s what the code would look like for the second row:


    Anna Fitzgerald Staff Writerexample@company.com
    tag. All together, your code would look something like this:


    <表>









































    名称Job Title电子邮件地址
    Anna Fitzgerald Staff Writerexample@company.com
    John Smith营销经理example2@company.com
    Zendaya Grace首席执行官example2@company.com

    这是网站前端的桌子外观:

    Basic HTML table of contact information

    请注意,每一列的宽度足以适合文本,并且没有边界将一列或行与下一列分开。结果是杂乱无章的,难以阅读。

    Below we’ll look at some ways you can make this table easier to read.

    Editing the Table Border

    Tables do not have any borders by default. To add borders, use the CSS border property.

    Let’s say I want to add a simple black border around my table above. Then I’d just need to add the following CSS in the head section of my HTML file or in my external stylesheet.


    table, th, td {

    border: 1px solid black;

    }

    The HTML in the body section of the HTML file would stay the same.

    Here’s how that would look on the front end:

    htmltable of contact information with uncollapsed borders

    请注意,桌子,表标头和桌子单元格周围的边界彼此分开。要崩溃,请使用CSS边境崩溃属性。您只需将此属性添加到CSS规则集中,然后将值设置为“崩溃”。这是您的CSS现在的样子:


    table, th, td {

    border: 1px solid black;

    border-collapse: collapse;

    }

    Again, the HTML stays the same.

    Here’s how that would look on the front end:

    htmltable of contact information with collapsed borders

    Adding borders has already helped make this table easier to read — but it still looks congested. Let’s look at how we can add more white space to this table.

    Editing the Table Padding

    As mentioned above, tables are only as large as their content requires by default. So your second step is to add more space around the content within the table cells. To do so, use theCSS填充属性

    由于填充指定单元格的内容和它的边框之间的空间,因此您只需要在表标头和表数据元素中添加填充,而不是表元素本身。这意味着您将创建一个仅使用两个的新CSS规则集CSS选择器: th and td. You’d then set the CSS padding property to whatever value you want. Below I’ll set it to 10px.

    Here’s what the CSS would look like:


    table, th, td {

    border: 1px solid black;

    border-collapse: collapse;

    }

    th, td {

    padding: 10px;

    }

    The HTML stays the same.

    Here’s how that would look on the front end:

    htmltable of contact information with borders and padding

    The table is looking much better now, but we can improve it by differentiating the header from the other cells. Let’s look at how below.

    Editing the Table Header

    To make the table header stand out, you can do something as simple as add a background color to those cells. You’d just need to use the element selector “th” to apply unique style properties to the header only.

    下面,您将使用与上述相同的CSS,但添加一个包含的第三个规则集CSS background-color property。You can then set the property to a specific color value using a十六进制颜色代码。For this example, I’ll use a hex color code for a soft shade of yellow.

    这是CSS:


    table, th, td {

    border: 1px solid black;

    border-collapse: collapse;

    }

    th, td {

    padding: 10px;

    }

    th {

    background-color: #FDDF95;

    }

    Here’s how that would look on the front end:

    htmltable of contact information with borders and padding and table header set to a yellow background color

    This table is looking better and better! Now let’s say you want to style a column instead of a row. We’ll take a look at how below.

    编辑表列Width

    If you had to guess how to style a column, you might think you’d have to add a style attribute to the cell of each row. That’d be frustrating, right? The good news is you don’t have to.

    You can use the tag instead. This tag specifies a group of one or more columns in a table so you can apply CSS to columns rather than cell by cell.

    要创建此组,请在HTML文件的正文部分中添加标签。在此标签中,您将为表中的每一列或要样式的每一列添加一个标签。这是HTML代码的样子:












    You can then target this group of columns with CSS. Let’s say you don’t want to just specify the padding — or space between a cell’s content and its border — you also want to specify the width of each column. Then you could add another rule set to your CSS and define the width property.

    Here’s how the CSS would look:


    table, th, td {

    border: 1px solid black;

    border-collapse: collapse;

    }

    th, td {

    padding: 10px;

    }

    th {

    background-color: #FDDF95;

    }

    colgroup {

    宽度:250px;

    }

    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:

    html的联系表,带有指定的列宽度

    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 tag in the body section. Within that attribute, you’d add and specify the width property. Here’s how the tag would look:











    Here’s how that would look on the front end:

    htmltable of contact information with one specified column width

    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 tag with a colspan attribute set to "2." Then, you'd add two more tags containing the employees' phone numbers to each row.

    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:

    htmltable example of contact information with cell spanning multiple columns-1

    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:

    htmltable of contact information with yellow background color

    如果您希望表标头和表数据元素具有不同的背景颜色,则只需使用两个元素选择器“ 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:

    与奥拉HTML表的联系信息nge and yellow background colors

    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:

    htmltable of contact information with background color and enlarged header font-1

    一旦您对桌子的外观感到满意,您可能有兴趣更改其在页面上的位置。您可以做到这一点的一种方法是更改​​其默认对齐方式。让我们看看下面的情况。

    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 Writerexample@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:

    中心对准的HTML联系人表

    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 tag of the existing table.

    假设我想在嵌套桌上列出工作人员的家庭和手机。

    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:

    htmltable nested within another HTML table

    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.

    New Call-to-action

    css introduction

    Originally published May 4, 2021 7:00:00 AM, updated May 04 2021

    Topics:

    html