One of the most commonly used tags in HTML is <table>. An HTML tag that creates a table. You can create galleries as well as tables, which were once used to arrange layout space for the entire website. In this post, I'll tell you about all the techniques for creating HTML tables.
create table
| topic | tag | note |
| components of the table | <table> | tag to create table |
| <th> | tag that creates the header part of the table | |
| <tr> | tag that creates a row in the table | |
| <td> | tag to create a column in a table |
The order in which the tables are created is as follows: First, there is a <table> </ table> tag on the outermost side. And at the top we use a table header tag called <th>. The Default value is bold and centered is the default. In effect, far more people don't use this tag. (Most of the <tr> tags are used to create the table header.) Next, there is the <tr> tag that creates the row. And inside the <tr> tag is the attribute <td> tag that creates the column. You can easily understand it by looking at the example below.
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC>
<html>
<head>
<meta charset="EUC-KR">
<title>Create a simple table</title>
</head>
<body>
<table border="1">
<th>table</th>
<th>to make</th>
<tr><!-- first line start -->
<td>first column</td>
<td>second column</td>
</tr><!-- first line end -->
<tr><!-- second line start -->
<td>first column</td>
<td>second column</td>
</tr><!-- second line end -->
</table>
</body>
</html>change table design
| topic | value | note |
| change table design | border | table border |
| bordercolor | table border color | |
| width | table width size | |
| height | table vertical size | |
| align | sort | |
| bgcolor | background color | |
| colspan | horizontal merge (column merge) | |
| rowspan | vertical merge (row merge) |
There are many ways to change the design of the table, but the attributes in the table above are typical.
1. The border attribute is an attribute that sets the boundaries of the table. ex (border = "1") The higher the number, the thicker the border.
2. bordercolor is an attribute that specifies the color of the border. ex (border color = "blue") The default value is black.
3. width and height are attributes that determine the size of the table. ex (width = 50px width = 100%) It can be given in pixel size and ratio.
4. align serves to sort the values in the table.
5. You can use the bgcolor property to specify the required tag background color.
6. colspan and rowspan have the function of merging cells (row / column).
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<table border="1" bordercolor="blue" width ="500" height="300" align = "center" >
<tr bgcolor="blue" align ="center">
<p><td colspan = "3" span style="color:white">Today's Income/Expenses</td></p>
</tr>
<tr align = "center" bgcolor="skybule">
<td>contents</td>
<td>income</td>
<td>expenditure</td>
</tr>
<tr>
<td>salary</td>
<td>10,000,000</td>
<td></td>
</tr>
<tr>
<td>lunch cost</td>
<td></td>
<td>5,000</td>
</tr>
<tr>
<td>parents gift cost</td>
<td></td>
<td>300,000</td>
</tr>
<tr>
<td rowspan="3" align = "center" bgcolor="skyblue">total cost</td>
<td>income</td>
<td>expenditure</td>
</tr>
<tr>
<td>10,000,000</td>
<td>350,000</td>
</tr>
<tr>
<td>remaining cost</td>
<td>9,650,000</td>
</tr>
</table>
</body>
</html>'HTML' 카테고리의 다른 글
| [HTML] HTML/ol, ul, dl/sorted list, unsorted list, definition list (0) | 2022.08.04 |
|---|---|
| [HTML] HTML/br/line break tag (0) | 2022.08.04 |
| [HTML] HTML/h1, h2, h3, h4, h5, h6, p/ title and paragraph (0) | 2022.08.04 |
| [HTML] HTML / Grammar (0) | 2022.08.04 |
| What is HTML? (0) | 2022.07.22 |