Getting Started with HTML Tables

HTML Forms: Guide to Creating Responsive and Mobile-Friendly Forms

HTML tables are used to display table data on web pages. They are great for displaying information in an organized way and can be styled using CSS to match the look and style of a website. This tutorial will cover the basics of creating HTML tables and adding styles to make them responsive and mobile-friendly.

Key Points

• HTML tables are powerful tools for displaying table data on web pages, and can create tables, rows, and cells using <table>, <code><tr> and <code><td> tags. <li>CSS properties such as borders, fills, background colors, and media queries for different screen sizes can be implemented to make HTML tables responsive and mobile-friendly. </li> <li> Accessibility of HTML tables can be enhanced by adding titles with <code><caption></caption> tags and summaries with <summary></summary> tags that provide descriptions and summaries for non-visual users.

Create HTML table

To create an HTML table, we need to use the <table> tag. Within the <code><table> tags, we need to create one or more <code><tr> tags that define each row of the table. Within each <code><tr> tag, we can create one or more <code><td> tags that define the cells of the table. Here is an example of a basic HTML table: <pre class='brush:php;toolbar:false;'>&lt;table&gt; &lt;tr&gt; &lt;td&gt;单元格1&lt;/td&gt; &lt;td&gt;单元格2&lt;/td&gt; &lt;td&gt;单元格3&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;单元格4&lt;/td&gt; &lt;td&gt;单元格5&lt;/td&gt; &lt;td&gt;单元格6&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;</pre> <p> This creates a table with two rows and three columns, each cell showing its contents. </p> <p><a href="https://www.php.cn/link/a382db0a40615cdbe363ae0b4b2eb262">View CodePen example</a> (Replace with the actual CodePen link, if present)</p> <h2 id="Add-rows-and-columns">Add rows and columns</h2> <p>To add a new row to the table, we just need to create a new <code><tr> tag. To add a new cell to a table, we can create a new <code><tr> tag within the existing <code><td> tag. Here is an example table with four rows and three columns: <pre class='brush:php;toolbar:false;'>&lt;table&gt; &lt;tr&gt; &lt;td&gt;单元格1&lt;/td&gt; &lt;td&gt;单元格2&lt;/td&gt; &lt;td&gt;单元格3&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;单元格4&lt;/td&gt; &lt;td&gt;单元格5&lt;/td&gt; &lt;td&gt;单元格6&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;单元格7&lt;/td&gt; &lt;td&gt;单元格8&lt;/td&gt; &lt;td&gt;单元格9&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;单元格10&lt;/td&gt; &lt;td&gt;单元格11&lt;/td&gt; &lt;td&gt;单元格12&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;</pre> <p> This will create a table with four rows and three columns. </p> <h2 id="Set-HTML-table-style">Set HTML table style</h2> <p>You can use CSS to style HTML tables to change their appearance. Some of the most common CSS properties used to style tables include borders, fills, and background colors. Here is an example of how to style a table using borders and background colors: </p> <pre class='brush:php;toolbar:false;'>table { border: 1px solid black; background-color: #f2f2f2; } td { padding: 8px; }</pre> <p> This will create a table with black borders and light gray background colors, each cell filled with 8 pixels. </p> <p><a href="https://www.php.cn/link/a382db0a40615cdbe363ae0b4b2eb262">View CodePen example</a> (Replace with the actual CodePen link, if present)</p> <h2 id="Create-responsive-and-mobile-friendly-forms">Create responsive and mobile-friendly forms</h2> <p>One of the challenges of using HTML tables is to make them responsive and mobile-friendly. One way to achieve this is to use CSS to adjust the layout of the table according to the screen size. One way is to use the <code>display attribute to change the layout of the table from a fixed layout to a responsive layout. This can use media queries to locate specific screen sizes. Here is an example of how to make a table responsive:

<table>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
  </tr>
  <tr>
    <td>单元格4</td>
    <td>单元格5</td>
    <td>单元格6</td>
  </tr>
</table>

When the screen width is less than 600 pixels, this changes the table layout from fixed layout to responsive layout.



View CodePen example (Replace with the actual CodePen link, if present)

Add Title and Summary

Another important aspect of using HTML tables is to make them accessible to non-visual users. One way is to add a title and summary to the table. The <caption></caption> tag can be used to add a title to a table that describes the content of the table. Here is an example of how to add a title to a table:

<table>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
  </tr>
  <tr>
    <td>单元格4</td>
    <td>单元格5</td>
    <td>单元格6</td>
  </tr>
  <tr>
    <td>单元格7</td>
    <td>单元格8</td>
    <td>单元格9</td>
  </tr>
  <tr>
    <td>单元格10</td>
    <td>单元格11</td>
    <td>单元格12</td>
  </tr>
</table>

This will add a title to the table that shows sales by month. <summary></summary> tags can be used to provide summary of forms for screen readers and other assistive technologies. Here is an example of how to add a summary to a table:

table {
  border: 1px solid black;
  background-color: #f2f2f2;
}
td {
  padding: 8px;
}

This will provide a summary of the table for screen readers and other assistive technologies, indicating that it shows sales by month.

Is it not good to use the form?

No! Tables are an important part of HTML. They are essential for displaying tabular data in a semantic and accessible way. In the early days of the World Wide Web, before CSS came into being, tables provided a way to layout web design, but this was not its intended purpose. Thankfully, those days have passed long (well, mostly, but for some email clients!), we can now focus on how HTML tables really — and extremely important in displaying data ——The function.

Conclusion

HTML tables are powerful tools for displaying table data on web pages. With CSS, you can style the table to match the look and style of a website and make it responsive and mobile-friendly to users on different devices. Adding titles and summary to a table can help improve accessibility for users with disabilities. Using these techniques, we can create effective forms that are both visually attractive and powerful.

HTML Form FAQ (FAQ)

How to merge cells in HTML table?

Cells in HTML tables can be merged using the "colspan" and "rowspan" properties. The "colspan" property allows cells to span multiple columns, and the "rowspan" property allows cells to span multiple rows. For example, if you want to make a cell span two columns, you can use the following code: <td colspan="2">内容</td>. Similarly, if you want to make a cell span two rows, you can use the following code: <td rowspan="2">内容</td>.

How to add borders to HTML tables?

You can use the "border" property in the <table> tag to add borders to HTML tables. For example, <code><table border="1"> will create a bordered table. However, this property is not supported in HTML5. Instead, you can add borders using CSS. For example, you can add borders using the following code: <code>table, th, td {border: 1px solid black;}.

How to style HTML tables using CSS?

CSS can be used to style HTML tables by positioning "table", "th" and "td" elements. For example, you can change the background color of the table title (th) and table data (td) using the following code: th {background-color: #f2f2f2;} td {background-color: #ffffff;}. You can also add fills, change text colors, and more.

How to make HTML tables responsive?

CSS can be used to make HTML tables responsive. You can use the "overflow" property to add scroll bars to the table when the width of the table is less than the screen size. For example, you can use the following code to make a table responsive: table {width: 100%; overflow: auto;}.

How to add a title to an HTML table?

You can use the "caption" tag to add a title to an HTML table. The "caption" tag must be inserted after the <table> tag. For example, <code><table><caption>表格标题</caption></table>.

How to align text in HTML table?

You can use the "text-align" property in CSS to align text in HTML tables. For example, you can use the following code to center the text: th, td {text-align: center;}.

How to add background color to HTML table?

You can add background color to HTML tables using the "background-color" property in CSS. For example, you can add background color to a table using the following code: table {background-color: #f2f2f2;}.

How to add hover effect to HTML table?

You can use the ":hover" pseudo-class in CSS to add a hover effect to HTML tables. For example, you can use the following code to change the background color of a table row when the mouse pointer hovers over a table row: tr:hover {background-color: #f5f5f5;}.

How to add scrollbars to HTML tables?

You can use the "overflow" property in CSS to add scrollbars to HTML tables. For example, you can add a scrollbar to a table using the following code: table {overflow: auto;}.

How to add alternating row colors to HTML tables?

You can add alternating row colors to HTML tables using the ":nth-child" pseudo-class in CSS. For example, you can add alternating line colors using the following code: tr:nth-child(even) {background-color: #f2f2f2;}.

The above is the detailed content of Getting Started with HTML Tables. For more information, please follow other related articles on the PHP Chinese website!