搜尋

首頁 >web前端 >html教學 >在 HTML 中建立表格

在 HTML 中建立表格

王林
王林原創
2024-09-04 16:37:511222瀏覽

HTML 表格有許多行和列，我們可以在其中插入、排列和顯示資料。然後，該資料以表格格式顯示在網頁上。這些表格可協助我們以有序的方式呈現數據，例如顯示項目清單、顯示銷售報告等表格數據、為網頁部分建立版面等。

在本文中，我們將學習如何建立以下類型的 HTML 表格：

  • 簡單表格
  • 有邊框和填充的表格
  • 有樣式的表格
  • 有標題的表格
  • 有巢狀表格的表格
  • 具有列跨度和行跨度的表格
  • 帶有 colgroup 的表

在 HTML 中建立表格的要點

  1. 文字編輯器或 HTML 編輯器： 開啟文字編輯器或 HTML 編輯器（例如 Notepad++、Sublime Text 或 Visual Studio Code）來撰寫並儲存 HTML 程式碼。我們使用 Notepad++ 作為預設編輯器，但您可以使用任何您喜歡的編輯器。
  2. HTML 檔案： 在 Notepad++ 中建立一個新檔案。我們將其命名為“table.html”或您喜歡的任何其他名稱，但請記住檔案名稱以“.html”結尾。您將在該文件中編寫網頁程式碼。如果您需要協助建立此文件，您可以查看我們的教學課程「用 HTML 設計網頁」。
  3. HTML 程式碼： 我們在本文中提供了用於建立不同類型表格的所有基本程式碼。只需將程式碼複製並貼上到您的“table.html”檔案中即可。
  4. 網頁瀏覽器：在「table.html」檔案中編寫 HTML 程式碼後，您需要檢視並測試您的網頁。您可以使用 Google Chrome、Mozilla Firefox 或 Microsoft Edge 等網頁瀏覽器。我們使用 Google Chrome 查看本文中所有範例的網頁，但您可以選擇您喜歡的任何瀏覽器。

HTML 中使用的標籤

在 HTML 中建立表格之前，了解用於建立和建立表格的標籤非常重要。以下是用於建立 HTML 表格的關鍵標籤：

表>

Examples of Tables in HTML

Example 1: Simple Table

Let’s create a basic HTML table that showcases product information. We will include two columns labeled “Product” and “Price.” The table will contain a single row displaying data for the product “Apple” with a price of $20.

To create a simple HTML table:

  1. Open an HTML file in a text or HTML editor.
  2. Add the
Tag Description
Defines a table and its content.
Defines a title or caption for a table.
Groups the header content in a table.
Groups the body content in a table.
Groups the footer content in a table.
Defines a table row.
Defines a table header cell.
Defines a table data/cell.
Specifies a set of one or more columns in a table for the purpose of formatting.
Defines the attributes for a group of columns in a table.
標籤		 描述
定義表格及其內容。
定義表格的標題或說明。
將表頭內容分組到表格中。
將正文內容分組到表格中。
將頁腳內容分組到表格中。
定義表格行。
定義表格標題儲存格。
定義表格資料/儲存格。
為格式化目的指定表格中的一組或多列。
定義表中一組列的屬性。
element to define the table.
  • Use the
    • element to create table rows.
  • The
    • tag. For instance, you can use style=”background-color: #33cccc;” to set the background color to a nice shade of teal.

    Code:

    <table>
<tr>
<th style="background-color: #33cccc;">Country</th>
<th style="background-color: #33cccc;">Population</th>
<th style="background-color: #33cccc;">Capital</th>
</tr>
<tr>
<td>Spain</td>
<td>47 Million</td>
<td>Madrid</td>
</tr>
<tr>
<td>Finland</td>
<td>5.5 Million</td>
<td>Helsinki</td>
</tr>
</table>

    Output:
    在 HTML 中建立表格

    Example 4: Table with Caption

    Using an HTML table with a caption is a great way to present information on a webpage in a tidy and organized manner. It’s like giving your table a title or a brief description to help people grasp its content easily. To include a caption, all you have to do is use the

    element defines table headers (column labels).
  • Use the
    		• element to create table cells (data).
  • Insert the desired data within the table cells.
  • Save the file with the .html extension, and then open it in a web browser to view the table.

    • Code:

    <!DOCTYPE html>
<html>
<head>
<title>Simple Table</title>
</head>
<body>
<table>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
<tr>
<td>Apple</td>
<td>$20</td>
</tr>
</table>
</body>
</html>

    Output:
    The resultant table for product and price will be displayed as seen below:
    在 HTML 中建立表格

    To add an additional column to the table in the example, you can use the

    		element within your table’s column. This element is used to define header cells for the column.

    And if you want to add a new row to the table, you can use the

    		element. This element is used to define regular cells within the table row.

    Code:

    <table>
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
</tr>
<tr>
<td>Apple</td>
<td>$20</td>
<td>10</td>
</tr>
<tr>
<td>Orange</td>
<td>$10</td>
<td>15</td>
</tr>
</table>

    Output:
    在 HTML 中建立表格

    Let’s see how to add borders to an HTML table. This is a way to visually separate the different sections of the table and make it easier to read and understand.

    Example 2: Table with Borders and Padding

    In this example, we will add a table element and set the border and cellpadding attribute. We will use the border attribute and set the width of the table’s border to 1 pixel. For the cellpadding attribute, we will use 5 pixels of padding for the content inside each cell.

    Code:

    <table border="1" cellpadding="5">
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td>Michael</td>
<td>27</td>
<td>Alaska</td>
</tr>
<tr>
<td>Evelyn</td>
<td>32</td>
<td>Ohio</td>
</tr>
</table>

    Output:
    在 HTML 中建立表格

    Example 3: Table with Styling

    If you want to improve the appearance of your table, you can use CSS (Cascading Style Sheets) to add various styles and formatting.

    One way to enhance the table is by giving different cells a background color. To do this, you can simply add the style attribute with the background-color property inside the opening

    tag and place it right below the tag.

    Code:

    <style>
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
}
caption {
background-color: #33cccc;
padding: 8px;
font-weight: bold;
}
</style>
<table>
<caption>Employee Information</caption>
<tr>
<th>Name</th>
<th>Position</th>
<th>Salary</th>
</tr>
<tr>
<td>Margot Mitchell</td>
<td>Manager</td>
<td>$60,000</td>
</tr>
<tr>
<td>Ryan Arnett</td>
<td>Developer</td>
<td>$50,000</td>
</tr>
</table>

    Output:
    在 HTML 中建立表格

    Example 5: Table with Nested Tables

    In HTML, when we talk about a nested table, it means we have a table placed inside another table. So, basically, some cells in the outer table contain a whole new table structure within them. If you want to include a nested table, you just need to insert another table inside any cell of your main table. To understand better, here is an example:

    Code:

    <table border="1">
<tr>
<th style="background-color: #33cccc;">Device</th>
<th style="background-color: #33cccc;">Brand</th>
<th style="background-color: #33cccc;">Specifications</th>
</tr>
<tr>
<td>Smartphone</td>
<td>Apple</td>
<td>
<table border="1">
<tr>
<th style="background-color: #fddb5d;">Model</th>
<th style="background-color: #fddb5d;">Storage</th>
</tr>
<tr>
<td>iPhone 12 Pro</td>
<td>256GB</td>
</tr>
<tr>
<td>iPhone SE</td>
<td>128GB</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Laptop</td>
<td>HP</td>
<td>15.6" Display</td>
</tr>
<tr>
<td>Tablet</td>
<td>Samsung</td>
<td>10.5" Display</td>
</tr>
</table>

    Output:
    在 HTML 中建立表格

    Example 6: Table with Col Span and Row Span

    In HTML, the “colspan” and “rowspan” give you the power to merge or split cells horizontally (colspan) and vertically (rowspan) to create more advanced table structures.

    If you want to merge cells horizontally, simply use “colspan” followed by the number of cells you want to merge. And if you want to merge cells vertically, you can use “rowspan” along with the number of cells you want to merge.

    To use the colspan and rowspan attributes, you can add them directly within the

    element to group columns in an HTML table. We can also use the tag within the tag to set a background color for specific columns. To implement this, you can simply add a right after the opening
    or elements that you want to merge.

    Code:

    <!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
.football {
background-color: #33cccc;
}
.tennis {
background-color: #33cccc;
}
.lebron {
background-color: #fddb5d;
}
.heading {
background-color: #808080; /* Grey */
color: #fff; /* White */
}
</style>
</head>
<body>
<table>
<tr>
<th class="heading">Sport</th>
<th colspan="2" class="heading">Player</th>
</tr>
<tr>
<td rowspan="2" class="football">Football</td>
<td>Lionel Messi</td>
<td>Cristiano Ronaldo</td>
</tr>
<tr>
<td>Neymar</td>
<td>Harry Kane</td>
</tr>
<tr>
<td class="tennis" rowspan="2">Tennis</td>
<td>Novak Djokovic</td>
<td>Rafael Nadal</td>
</tr>
<tr>
<td>Serena Williams</td>
<td>Naomi Osaka</td>
</tr>
<tr>
<td>Basketball</td>
<td colspan="2" class="lebron">LeBron James</td>
</tr>
</table>
</body>
</html>

    Output: 
    在 HTML 中建立表格

    Example 7: Table with Colgroup

    In HTML, we use the

    tag.

    Code:

    <!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
}
</style>
</head>
<body>
<table>
<colgroup>
<col style="background-color: #a9a9a9;">
<col style="background-color: #fddb5d;">
<col style="background-color: #33cccc;">
</colgroup>
<tr>
<th>City</th>
<th>Country</th>
<th>Continent</th>
</tr>
<tr>
<td>New York</td>
<td>United States</td>
<td>North America</td>
</tr>
<tr>
<td>London</td>
<td>United Kingdom</td>
<td>Europe</td>
</tr>
<tr>
<td>Tokyo</td>
<td>Japan</td>
<td>Asia</td>
</tr>
</table>
</body>
</html>

    Output: 
    在 HTML 中建立表格

    以上是在 HTML 中建立表格的詳細內容。更多資訊請關注PHP中文網其他相關文章！

    firefox css chrome html edge define if for format include using Attribute Property copy number default this display padding border background column table tbody td tr th visual studio visual studio code sublime text microsoft
    陳述：
    本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
    上一篇：HTML5 語意元素下一篇：HTML5 語意元素

    相關文章

    看更多