Home > Article > Web Front-end > HTML table knowledge summary
HTML table knowledge summary
- 小云云Original
- 2017-11-17 14:29:282024browse
To step into the door of programmers, the path we must pass is HTML. Only by mastering basic HTML can we better learn the next technology. So today we will share all aspects of knowledge related to HTML tables.
##1.b, attribute of table tag
Width attribute: Indicates the width of the table, its value can be pixels (px) or 100% (%) of the parent element
height Attribute: Indicates the height of the table. Its value can be pixels (px) or a percentage (%) of the parent element
border attribute: Indicates the width of the outer border of the table
align attribute : The display position of the table, the value left is displayed on the left, center is displayed on the center, right is displayed on the right, the default is left
Cellspacing attribute: the spacing of the cell time, the default is 2px, the unit pixel is
Cellpadding attribute: cell The display distance between the content and the cell border, in pixels
frame attribute: control the display distance of the table border
void(default value) means no border
above means only the top There is a border
Indicates only the right border
VSides indicates only the left and right borders
box contains all 4 borders
border contains all 4 borders
Rules Properties: Control whether and how to display the dividing lines between cells
None (default value) means no dividing lines
All means including all dividing lines
rows means Only row dividing lines
clos means there are only column dividing lines
Layout
2,63bd76834ec05ac1f4c0ebbeaafb0994Mark
a, when to use it? When to use If the table needs to use a title, then you can use the 63bd76834ec05ac1f4c0ebbeaafb0994 tag
b. How to use it? The insertion position of the 63bd76834ec05ac1f4c0ebbeaafb0994 attribute is directly after the f5d188ed2c074f8b944552db028f98a1 attribute, a34de1251f0d9fe1e645927f19a896e8 before the table row
c, align attribute
top: The title is placed at the top of the table
botton: The title is placed at the bottom of the table
Left: The title is placed on the left side of the table
Right: The title is placed on the right side of the table
3, a34de1251f0d9fe1e645927f19a896e8Mark
a, defines a row of the table. Each table row is represented by a pair of a34de1251f0d9fe1e645927f19a896e8...fd273fcf5bcad3dfdad3c41bd81ad3e5 tags, each rowa34de1251f0d9fe1e645927f19a896e8 Tags can be nested with multiple b6c5a531a458a2e790c1fd6421739d1c or b4d429308760b6c2d20d6300079ed38e tags
b, optional attributes
Set the horizontal alignment format: align="color value"
botton: Align to the top
top: Align to the bottom
Middle: Align to the center
4, b6c5a531a458a2e790c1fd6421739d1c and b4d429308760b6c2d20d6300079ed38e
a, b6c5a531a458a2e790c1fd6421739d1c and b4d429308760b6c2d20d6300079ed38e are all cell tags, which must be nested within the a34de1251f0d9fe1e645927f19a896e8 tag and appear in pairs
b, b4d429308760b6c2d20d6300079ed38e is the table header Mark, usually located in the first row or column. The text in b4d429308760b6c2d20d6300079ed38e will be bolded by default, while b6c5a531a458a2e790c1fd6421739d1c will not
c, b6c5a531a458a2e790c1fd6421739d1c is a data mark, indicating the cell The specific data
d, the mark attributes of both are the same
e, the attributes
Cell background
valign: Set cell vertical alignment
Width: Set cell width
Height: Set cell height
rowspan: Set Number of rows occupied by cells
Clospan: Set the number of columns occupied by cells
eg:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table width="960" height="250" border="1" cellpadding="10" frame="box" >
<caption>表格的标题</caption>
<tr bgcolor="#ccc">
<th bgcolor="red">班级</th>
<th>姓名</th>
<th>年级</th>
<th>成绩</th>
</tr>
<tr>
<td>四年级一班</td>
<td>张三</td>
<td>16</td>
<td>80</td>
</tr>
<tr>
<td>四年级一班</td>
<td>李四</td>
<td>16</td>
<td>70</td>
</tr>
<tr>
<td>四年级一班</td>
<td>王五</td>
<td>16</td>
<td>60</td>
</tr>
</table>
</body>
</html>The above are some related contents of the most basic html table. According to the above Follow the tutorial to complete a form, I believe you will gain a lot.
Related recommendations:
Comprehensive introduction to HTML table properties Rediscover HTML tables Detailed introduction about HTML tables Actual use of HTML table layout##Explanation of HTML table layout examples
The above is the detailed content of HTML table knowledge summary. For more information, please follow other related articles on the PHP Chinese website!