HTML table composition:
By <table>tags and one or more <tr>, <th>or <td>tags:
-
<table>Label: used to define the table, the entire table is contained in the<table></table>label; -
<tr>Label: Used to define a row in the table, it is a cell container, each row can contain multiple cells, represented by a<tr></tr>label; -
<td>Labels and<th>labels: used to define cells, all cells are in<th>labels, each cell is represented by a pair of<td></td>labels or a pair of<th></th>labels, and the specific table content is placed in this pair of<td>labels or<th>labels, where th label The content in is displayed in bold and centered by default.
The syntax is as follows:
<table>
<tr>
<th>1行1列的内容</th>
<th>1行2列的内容</th>
…
</tr>
<tr>
<td>2行1列的内容</td>
<td>2行2列的内容</td>
…
</tr>
…
</table>
<table>Yes<tr>, the upper label;<tr>Must be in one<table></table>, it cannot be used alone, equivalent to<table>the attribute tag;<table>Mark a table,<tr>mark a row in the middle of the table,<td>、<th>mark a column in a row, it needs to be nested in the middle;
table tag attributes:
1) Border tag attribute: set the width of the border around the table. In fact, the border tag property not only sets the width of the border around the table, but also adds a border of 1px width to each cell;
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>border标签属性</title>
<style>
table{
border: 15px solid #000;
}
th,td{
border: 1px solid #000;
}
</style>
</head>
<body>
<table >
<tr>
<th> 姓名 </th>
<th> 年龄</th>
<th> 性别</th>
</tr>
<tr>
<td> 张三</td>
<td> 19 </td>
<td> 男 </td>
</tr>
</table>
</body>
</html>
2) width tag attribute: set the width of the table; it is not recommended to set the table width through the width tag attribute, it is recommended to add a width style attribute to the table tag to set it.
- px: Set the width in pixels (for example: width="100px")
- %: Set the width based on the percentage of the contained element (example: width="100%")
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>width标签属性</title>
<style>
table{
width:"80%"；
}
</style>
</head>
<body>
<table border="15px">
<tr>
<th> 姓名 </th>
<th> 年龄</th>
<th> 性别</th>
</tr>
<tr>
<td> 张三</td>
<td> 19 </td>
<td> 男 </td>
</tr>
</table>
</body>
</html>
3) align tag attribute: specify the alignment of the table relative to the surrounding tags, it is recommended to add a style attribute to the table tag for setting;
Property value:
- left: left-aligned table
- right: align the table to the right
- center: align the table in the center
(1) Realize left-right alignment through float style attributes;
- left: the element floats to the left
- right: the element floats to the right
- none: the default value, the element does not float
- inherit: Specifies that the value of the float attribute should be inherited from the parent element
(2) Achieve center alignment through margin style attributes;
- margin:0 auto;
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>align标签属性</title>
<style>
table{
margin: 0 auto；
}
</style>
</head>
<body>
<table border="15px" width="80%">
<tr>
<th> 姓名 </th>
<th> 年龄</th>
<th> 性别</th>
</tr>
<tr>
<td> 张三</td>
<td> 19 </td>
<td> 男 </td>
</tr>
</table>
</body>
</html>
4) Cellspacing label attribute: set the spacing between cells (unit: px), it is recommended to add a border-spacing style attribute to the table label for setting;
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>cellspacing标签属性</title>
<style>
table{
border-spacing: 0；
}
</style>
</head>
<body>
<table border="15px" width= "80%">
<tr>
<th> 姓名 </th>
<th> 年龄</th>
<th> 性别</th>
</tr>
<tr>
<td> 张三</td>
<td> 19 </td>
<td> 男 </td>
</tr>
</table>
</body>
</html>
5) Cellpadding label attribute: set the distance between the edge of the cell and the cell content (unit: px), it is recommended to add padding style attributes to the td or th label to achieve;
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>cellspacing标签属性</title>
<style>
table{
padding: 8px；
}
</style>
</head>
<body>
<table border="15px" width= "80%" cellspacing="0">
<tr>
<th> 姓名 </th>
<th> 年龄</th>
<th> 性别</th>
</tr>
<tr>
<td> 张三</td>
<td> 19 </td>
<td> 男 </td>
</tr>
</table>
</body>
</html>
6) bgcolor label attribute: set the background color of the table;
- color_name: specifies the color value as the background color of the color name
- hex_number: Specifies the background color of the hexadecimal color value
- rgb_number: The specified color value is the background color of the rgb code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bgcolor标签属性</title>
<style>
table{
background-color: "red"；
}
</style>
</head>
<body>
<table border="15px" width= "80%" cellspacing="0">
<tr>
<th> 姓名 </th>
<th> 年龄</th>
<th> 性别</th>
</tr>
<tr>
<td> 张三</td>
<td> 19 </td>
<td> 男 </td>
</tr>
</table>
</body>
</html>
7) Border-collapse style property: Set whether the border of the table is merged into a single border;
- separate: the default value, the border will be separated;
- collapse: The borders will be merged into a single border;
- inherit: Specifies that the value of the border-collapse attribute should be inherited from the parent element; for
example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>border-collapse样式属性</title>
<style>
table{
font: 12px;/*字体大小*/
padding:10px;/*单元格边框与内容之间的间距*/
border: 1px solid #000;/*表格边框*/
}
</style>
</head>
<body>
<table style= border-collapse："collapse;">
<tr>
<th> 姓名 </th>
<th> 年龄</th>
<th> 性别</th>
</tr>
<tr>
<td> 张三</td>
<td> 19 </td>
<td> 男 </td>
</tr>
</table>
</body>
</html>
Complete a table with tag attributes:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
table{
border: 1px solid black;
width: 20%;
/*float:right;*/
margin: 0 auto;
border-spacing:0 ;
background-color: red;
border-collapse: collapse;
}
td{
border: 1px solid black;
padding: 10px;
}
</style>
</head>
<body>
<table >
<tr>
<td> 1 </td> <td> 1 </td> <td> 1 </td>
</tr>
<tr>
<td> 1 </td> <td> 1 </td> <td> 1 </td>
</tr>
<tr>
<td> 1 </td> <td> 1 </td> <td> 1 </td>
</tr>
</table>
</body>
</html>
Label attributes:
1) align tag attribute: set the horizontal alignment of the cell content in the table row;
- left: left-aligned content (default value)
- right: align content to the right
- center: align the content in the center (the default value of the th element)
- justify: stretch the lines so that each line can have equal length
- char: align the content to the specified character
2) valign tag attribute: set the vertical alignment of the cell content in the table row;
- top: top align the content
- middle: align the content in the center (default value)
- bottom: bottom align the content
- baseline: align with the baseline
3) bgcolor label attribute: set the background color of the table row
- color_name: specifies the color value as the background color of the color name
- hex_number: Specifies the background color of the hexadecimal color value
- rgb_number: The specified color value is the background color of the rgb code
Example:
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
table{
border: 1px solid black;
width: 20%;
/*float:right;*/
margin: 0 auto;
border-spacing:0 ;
background-color: red;
border-collapse: collapse;
}
tr{
height: 50px;
text-align: center;
vertical-align: top;
background-color: salmon;
}
td{
border: 1px solid black;
}
</style>
</head>
<body>
<table >
<tr valign="top">
<td> 1 </td> <td> 1 </td> <td> 1 </td>
</tr>
<tr>
<td> 1 </td> <td> 1 </td> <td> 1 </td>
</tr>
<tr>
<td> 1 </td> <td> 1 </td> <td> 1 </td>
</tr>
</table>
</body>
</html>
<th>And <td>label attributes:
1) Width label attribute and height label attribute: set the width and height of the cell
- pixels: set the width in pixels (for example: width="100px")
- percent: Set the width based on the percentage of the contained element (for example: width="100%")
2) bgcolor label attribute: set the cell background color
- color_name: specifies the color value as the background color of the color name
- hex_number: Specifies the background color of the hexadecimal color value
- rgb_number: The specified color value is the background color of the rgb code
3) align tag attribute: set the horizontal alignment of the cell content
- left: left-aligned content (default value)
- right: align content to the right
- center: align the content in the center (the default value of the th element)
- justify: stretch the lines so that each line can have equal length
- char: align the content to the specified character
4) valign tag attribute: set the vertical alignment of the cell content
- top: top align the content
- middle: align the content in the center (default value)
- bottom: bottom align the content
- baseline: align with the baseline
5) colspan style attribute: set how many columns the cell spans.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>colspan标签属性</title>
<style>
#title {
text-align: center；
font-weight: bold;
}
</style>
</head>
<body>
<table border="15px" width= "80%" cellspacing="0">
<tr>
<td colspan="3" id="title"></td>
</tr>
<tr>
<th> 姓名 </th>
<th> 年龄</th>
<th> 性别</th>
</tr>
<tr>
<td> 张三</td>
<td> 19 </td>
<td> 男 </td>
</tr>
</table>
</body>
</html>
6) Rowspan style attribute: set how many rows the cell spans
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>rowspan标签属性</title>
</head>
<body>
<table border="15px" width= "30%" cellspacing="0">
<tr>
<td colspan="4" style="text-align: center;">上午</td>
<td>语文</td>
</tr>
<tr>
<td> 化学</td>
</tr>
<tr>
<td> 历史</td>
</tr>
<tr>
<td> 政治</td>
</tr>
</table>
</body>
</html>
7) Nowrap tag attribute: set whether the content of the cell wraps or not.
Use the knowledge of the table to complete the following operations:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>nowrap标签属性</title>
</head>
<body>
<table border="1px" width= "100%" cellspacing="0">
<tr>
<th> 姓名 </th>
<th> 年龄</th>
<th> 地址</th>
</tr>
<tr>
<td> 张三</td>
<td> 19 </td>
<td nowrap="nowrap">北京市海淀区 </td>
</tr>
</table>
</body>
</html>