Community Learn Tools Library Leisure
search
English
Home > Web Front-end > Front-end Q&A > How to set up Html table

How to set up Html table

WBOY
Release： 2023-05-21 17:34:41
Original
4869 people have browsed it

HTML tables are one of the commonly used elements in web development. Through tables, data can be presented to users in a clear and organized form, making it easier for users to obtain information.

In this article, we will introduce how to create a table in HTML and how to set the properties of the table, including table borders, cell alignment, table headers, etc. Let’s start learning!

1. Create a table

In HTML, use the

tag to create a table. The following is a simple example showing how to create a table with only 3 rows and 2 columns: 

<table>
  <tr>
    <td>行1列1</td>
    <td>行1列2</td>
  </tr>
  <tr>
    <td>行2列1</td>
    <td>行2列2</td>
  </tr>
  <tr>
    <td>行3列1</td>
    <td>行3列2</td>
  </tr>
</table>
Copy after login

In the above code block, the

label means creating a table, and the label means creating The row of the table, the tag and identified with a
label indicates the creation of the cell. In a table, each cell must be placed within a
tag.

2. Set the border of the table

If you want to add a border around the table, you need to use CSS styles to set the border properties of the table. The following is an example of setting a blue border line: 



<table>
  <tr>
    <td>行1列1</td>
    <td>行1列2</td>
  </tr>
  <tr>
    <td>行2列1</td>
    <td>行2列2</td>
  </tr>
  <tr>
    <td>行3列1</td>
    <td>行3列2</td>
  </tr>
</table>
Copy after login

In the above example, the <table> <tr> <td>行1列1</td> <td>行1列2</td> </tr> <tr> <td>行2列1</td> <td>行2列2</td> </tr> <tr> <td>行3列1</td> <td>行3列2</td> </tr> </table>

Copy after login

In the above example, the text-align property of the CSS style is applied to all cells. This means that all cell contents in the table will be centered.

4. Set the header

In the table, you can use the

tag to wrap the content of the first row of cells and mark it as the header. At this time, the cell will be bolded to indicate that it is a header. Here is an example showing how to add a header: 

<style>
  th {
    background-color: gray;
    color: white;
    font-weight: bold;
  }
</style>

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
  </tr>
</table>
Copy after login

In the above example, the

tag is used for the header cell. CSS styles are used to change the color, background, font size and other properties of the table header to make it visually distinguishable from the cell content.

Summary

Through the above introduction, I believe readers have understood the basic usage of HTML tables and how to change tables through CSS styles. Finally, I would like to remind everyone that in actual development, tables often use JavaScript or other technologies to interact with the server, making the table a more useful tool.

The above is the detailed content of How to set up Html table. For more information, please follow other related articles on the PHP Chinese website!

source：php.cn
Previous article：Conversion of html format Next article：html tags are escaped
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
function_exists() cannot determine the custom function Function test () {return true;} if (function_exists ('test')) {echo "test is function...
From 2024-04-29 11:01:01
0
3
2282
How to display the mobile version of Google Chrome Hello teacher, how can I change Google Chrome into a mobile version?
From 2024-04-23 00:22:19
0
11
2417
The child window operates the parent window, but the output does not respond. The first two sentences are executable, but the last sentence cannot be implemented.
From 2024-04-19 15:37:47
0
1
2033
There is no output in the parent window document.onclick = function(){ window.opener.document.write('I am the output of the child ...
From 2024-04-18 23:52:34
0
1
1919
Where is the courseware about CSS mind mapping? Courseware
From 2024-04-16 10:10:18
0
0
1991
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template

Public welfare online PHP training，Help PHP learners grow quickly！

About us Disclaimer Sitemap

© php.cn All rights reserved