In web page writing, we will use tables, which involves the creation of tables and the writing of styles. The creation of tables is divided into rows and columns, as well as some modifications of tables, that is, some styles, such as the centering of table text, The border style and border color of the table, etc.
Let's create a simple table first, first create a table with three rows and three columns, use <tr> tags for rows and <td> tags for columns, and use a <table> tag. The code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table width="200"
border="none"
height="50px"
>
<tr>
<td align="center">1</td>
<td align="center">2</td>
<td align="center">3</td>
</tr>
<tr>
<td align="center">4</td>
<td align="center">5</td>
<td align="center">6</td>
</tr>
<tr>
<td align="center">7</td>
<td align="center">8</td>
<td align="center">9</td>
</tr>
</table>
</body>
</html>
The effect diagram is as follows
This is the table we created with three rows and three columns. Let's explain align=center, align is the positioning tag in HTML, center is the center, which is the center, and the parameters that can be written are left and right.
Looking at the above renderings, we can see that this table has a border, which looks unsightly. We can set it to remove the border and turn it into a table with a single border. We can also set the color of the table border. The code is as follows
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table width="200"
border="none"
height="50px"
bordercolor="red"
cellspacing="0">
<tr>
<td align="center">1</td>
<td align="center">2</td>
<td align="center">3</td>
</tr>
<tr>
<td align="center">4</td>
<td align="center">5</td>
<td align="center">6</td>
</tr>
<tr>
<td align="center">7</td>
<td align="center">8</td>
<td align="center">9</td>
</tr>
</table>
</body>
</html>
The effect diagram is as follows
In this way, we have realized the modification of the border. Explain that some of the properties cellspacing are the spacing of the cells. We set it to 0px to cancel the double border.
Here we can expand, we can also add a submit button to the form if needed. Used to submit our completed form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table width="800"
border="none"
height="200px"
bordercolor="red"
cellspacing="0">
<tr>
<td align="center">1</td>
<td align="center">2</td>
<td align="center">3</td>
</tr>
<tr>
<td align="center">4</td>
<td align="center">5</td>
<td align="center">6</td>
</tr>
<tr>
<td align="center">7</td>
<td align="center">8</td>
<td align="center"><button class="button" style="width: 80px;border-radius: 10px;height: 30px;background-color: #467ECF"><a>按钮</a></button></td>
</tr>
</table>
</body>
</html>
We set some properties to the button <button> to get the display effect. The effect diagram is as follows:
We can also add hyperlinks to the button tag, we can add it in the <a> tag
<a herf="The address we want to connect to"></a>
Other properties do not need to be changed