How does HTML draw a table?
May 29, 2021 Article blog
Table of contents
The application of tables is often involved in Web pages, as illustrated when a classification is described. S o how does HTML draw tables? This article W3Cschool editor-in-chief tells you.
label < the ></table >
Tables cannot be drawn
<table></table>
labels. T
he rows of the table are defined by
<tr>
label, while the columns of the table are defined by
<td>
The contents of a table can be text, pictures, lists, forms, and so on.
Let's take a look at the basic structure of the table:
<table>...</table>
Define the table
<th>…</th>
Define the title bar of the table (text bold)
<tr>…</tr>
Define the rows of the table
<td>…</td>
The column that defines the table.
Let's take a look at how to use it:
<table border="1">
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>To achieve the effect:
It's worth noting that tables don't have borders by default, so you must add
border
property to the label < the table ></table > to attach border values to the table.
If you want to implement cross-row or cross-column operations, you need to add
rowspan
or
colspan
to
<td></td>
label.
Specific effect:
Related code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格 - 编程狮(w3cschool.cn)</title>
</head>
<body>
<table border="1">
<tr>
<td rowspan="2">第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第二列</td>
</tr>
<tr>
<td colspan="3">第三行</td>
</tr>
</table>
</body>
</html>The rowspan property is the property used to merge rows, followed by a property value of the number of rows for the merged row.
The colspan property is the property used to merge columns, followed by the number of columns for the merged columns.
For more tabular effects, styles can be given through CSS.
That's all HTML does to draw the table. For more HTML tutorials, follow the W3Cschool website.
Related courses: HTML micro-classes, HTML-CSS advanced combat