How to create a responsive table layout using HTML and CSS

How to create a responsive table layout using HTML and CSS

HTML is a markup language used to build the structure of web pages, while CSS is used to set up the structure of web pages. Style and layout. In web design, tables are a common element used to present data in tabular form. This article will introduce how to use HTML and CSS to create a responsive table layout and provide specific code examples.

First, we need to create an HTML document and use the <table> tag to define the table. The <code><table> tag is the top-level container of the table, which can contain a series of <code><tr> tags. Each <code><tr> tag represents a row of data. . The data in each row is defined by <code><td> tags, which are cells in the table. <code>The following is an example of a simple HTML table structure:

<table>
  <tr>
    <td>姓名</td>
    <td>年龄</td>
    <td>性别</td>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>男</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>女</td>
  </tr>
</table>

In the above example, we created a simple table containing 3 columns and 3 rows of data. Next, we'll use CSS to style and layout the table.

In order to make the table display well on different devices, we can use CSS media queries to create a responsive table layout. Media queries can dynamically change styles based on the width of the device.

Here is a sample CSS code for a responsive table layout:

/* 默认表格样式 */
table {
  width: 100%;
  border-collapse: collapse;
}

/* 表头样式 */
th {
  background-color: #f1f1f1;
  font-weight: bold;
  text-align: left;
  padding: 8px;
}

/* 表格数据样式 */
td {
  padding: 8px;
}

/* 媒体查询：在窗口宽度小于600px时改变表格布局 */
@media screen and (max-width: 600px) {
  table {
    border: none;
  }
  tr {
    border-bottom: 1px solid #ddd;
    display: block;
    margin-bottom: 10px;
  }
  td {
    border-bottom: 1px solid #ddd;
    display: block;
    text-align: right;
  }
  td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
}

In the above example, we set the default style of the table and use media queries to target devices with a window width less than 600px Make layout adjustments. On small screen devices, we set the table's rows and cells as block-level elements and add appropriate borders and spacing. At the same time, we use the

::before

pseudo-element to add the label of each cell. With the above HTML and CSS code, we can create a responsive table layout. Whether the user is viewing the webpage on a large-screen desktop device or a small-screen mobile device, the table can be displayed with the best display effect.

I hope this article helps you understand how to use HTML and CSS to create a responsive table layout. By flexibly using various properties and techniques of HTML and CSS, you can create a more beautiful and easy-to-use web design.

The above is the detailed content of How to create a responsive table layout using HTML and CSS. For more information, please follow other related articles on the PHP Chinese website!