728x90
SMALL
#HTML
#Create HTML/table, thead, tbody, tfoot, th, tr, td/table
Tags used to create the table
- Tables are made with table tags.
- Lines are created with tr tags.
- Cells containing column titles are created with th tags.
- Cells containing content are created with the td tag.
- Each column can be separated by thead, tbody and tfoot tags depending on the meaning of each column.
- Use the colspan attribute when aligning horizontally adjacent cells.
- Use the rowspan attribute to align vertically adjacent cells.
- The title of the table is made with the caption tag.
example
Here is a simple example using all the above tags. In order to clearly show the result of alignment and cell alignment, I decided the width of the table with CSS and created the ruled line.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
table {
width: 100%;
}
table, th, td {
border: 1px solid #bcbcbc;
}
</style>
</head>
<body>
<table>
<caption>Lorem</caption>
<thead>
<tr>
<th></th>
<th>Ipsum</th>
<th>Ipsum</th>
<th>Ipsum</th>
</tr>
</thead>
<tbody>
<tr>
<th>Ipsum</th>
<td>Dolor</td>
<td>Dolor</td>
<td rowspan="2">Dolor</td>
</tr>
<tr>
<th>Ipsum</th>
<td>Dolor</td>
<td>Dolor</td>
</tr>
<tr>
<th>Ipsum</th>
<td>Dolor</td>
<td>Dolor</td>
<td>Dolor</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Table Foot</td>
</tr>
</tfoot>
</table>
</body>
</html>728x90
LIST
'HTML' 카테고리의 다른 글
| [HTML] HTML/img/image tag to insert (0) | 2022.08.21 |
|---|---|
| [HTML] HTML / caption / tag to attach caption to table (table) (0) | 2022.08.20 |
| [HTML] HTML / a / Creating links (0) | 2022.08.19 |
| [HTML] HTML / pre / tag to output as you type (0) | 2022.08.12 |
| [HTML] HTML/em, strong/highlight text, important text (0) | 2022.08.12 |