HTML-tables, forms
1. Table
basic composition label 1. table
label: table label
attribute: align specifies the alignment of the table relative to the surrounding elements.
Value: left, center, right
Attribute: bgcolor specifies the background color of the table.
Value: rgb(x,x,x), #xxxxxx, colorname
Attribute: border Specifies the width of the table border.
Value: pixels
Attribute: cellpadding Specifies the space between the edge of the cell and its content.
Value: pixels,%
attribute: cellspacing specifies the space between cells.
Value: pixels,%
attribute: width Specifies the width of the table.
Value: pixels,%
2.th label: Define the header cell in the table.
Attribute: align specifies the alignment of the table relative to the surrounding elements.
Value: left, center, right
Attribute: valign Specifies the vertical arrangement of cell content.
Value: top, middle, bottom
Attribute: bgcolor specifies the background color of the table.
Value: rgb(x,x,x), #xxxxxx, colorname
Attribute: border Specifies the width of the table border.
Value: pixels
Attribute: cellpadding Specifies the space between the edge of the cell and its content.
Value: pixels,%
Attribute: cellspacing specifies the space between cells.
Value: pixels,%
attribute: width Specifies the width of the table.
Value: pixels,%
3.tr tag: The tag defines the row in the HTML table.
Attribute: align specifies the alignment of table rows relative to surrounding elements.
Value: left, center, right
Attribute: valign Specifies the vertical arrangement of table row content.
Value: top, middle, bottom
attribute: bgcolor specifies the background color of the table row.
Value: rgb(x,x,x), #xxxxxx, colorname
Attribute: colspan Specifies the number of columns that the cell can span.
Value: number
attribute: rowspan Specifies the number of rows that the cell can span.
Value: number
4. td label:
attribute: align specifies the alignment of the cell relative to the surrounding elements.
Value: left, center, right
Attribute: valign Specifies the vertical arrangement of cell content.
Value: top, middle, bottom
attribute: bgcolor specifies the background color of the cell.
Value: rgb(x,x,x), #xxxxxx, colorname
Attribute: colspan Specifies the number of columns that the cell can span.
Value: number
attribute: rowspan Specifies the number of rows that the cell can span.
Value: number
Note: Remember to delete extra cells when using colspan and rowspan.
example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
<table border="1" cellpadding="10" cellspacing="0" width="50%" height="100">
<caption>学生信息</caption>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>22</td>
</tr>
<tr>
<td>王芳</td>
<td>女</td>
<td>20</td>
</tr>
</table>
</body>
</html>
The result is shown in Figure 
2. Form
1. Data can be sent from the client to the server.
2. There are many components that can be entered or selected in the form.
3. The user can enter information in the form and send it to the server.
The form tag represents a form and is not displayed.
Attribute
action="the address sent to the server"
method="the way to send data to the server" get/post (more secure)
component: input: input
Component attribute:
type="text" single-line text input box (default text)
type ="password" Dot the black round input box, and the input characters are not visible. Generally used for password input.
type="radio" radio button.
type="checkbox" checkbox.
id=“” The value must be unique and custom value.
name="" The attribute name can be repeated, and the value can be customized. The key to send data to the server.
Value="" The value submitted to the server will not be displayed.
placeholder="" The prompt message will disappear automatically when the content is entered.
size="" The width of the box.
readonly="readonly" Read only.
disabled="disabled" disables the component. Once the component is disabled, the value will not be submitted to the server.
accept="" The filter file
checked="checked" is selected by default.
Note: 1. The same name is a group, and the group can be single-selected.
2. Optional components need to give default values
3. When the form is submitted, only the selected one will be submitted.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form>
<label for="id">账号</label>
<input type="text" id="id" name="id" placeholder="请输入账号" />
<br />
<label for="mima">密码</label>
<input type="password" id="mima" name="mima" placeholder="请输入密码" />
<br />
<label for="fujian">附件</label>
<input type="file" accept=".jpg" id="fujian" name="fujian" /><label for="fujian">选择附件</label>
<br />
<label for="xingbie">性别</label>
<input type="radio" id="xingbie" name="xingbie" /><label for="xingbie">男</label>
<input type="radio" id="xingbie" name="xingbie" checked="checked" /><label for="xingbie">女</label>
<br />
<label for="kecheng">课程</label>
<input type="checkbox" id="kecheng" name="kecheng" /><label for="kecheng">java</label>
<input type="checkbox" id="kecheng" name="kecheng" /><label for="kecheng">c</label>
<input type="checkbox" id="kecheng" name="kecheng" /><label for="kecheng">css</label>
<input type="checkbox" id="kecheng" name="kecheng" /><label for="kecheng">html</label>
</form>
</body>
</html>
Result:
drop-down box label
<select>
<option value="向服务器提交的值">只是在页面显示</option>
</select>
The form will submit the selected content by default.
Multi-line text field label
<textarea cols="列数" rows="行数" ></textarea>
Note: The label body is the value
button
<input type="reset" value="重置"> 重置按钮，还原原始状态
<input type="submit" value="提交"> 提交按钮，向服务器提交表单
<input type="button" value="普通按钮"> 普通按钮，主要用于触发事件
Inline frame
<iframe src="网址" name="框架名" width="宽度" height="高度" frameborder="边框宽度" ></iframe>
supplement:
target="网址" 在指定名称的窗口打开新页面
target="_parent" 在父级窗口打开新页面
target="_top" 在顶级窗口打开新页面