Tag <table> ... complete code examples, see </ table>
The role of the layout, presentation content need tables for layout
Table 1 is a block-level element tag
2. The role of full-page layout has exited the stage
3. focus on areas we should focus on the layout
4. Table Style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表格</title>
</head>
<body>
<table>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>17120581028</td>
<td>小朱</td>
<td>女</td>
</tr>
</table>
</body>
</html>
Head of the table with style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表格</title>
</head>
<body>
<table>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>总分</th>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1712058</td>
<td>小朱</td>
<td>100</td>
</tr>
<tr>
<td>1711050</td>
<td>小谷</td>
<td>100</td>
</tr>
</tbody>
</table>
</body>
</html>
Table several important points: border issues (border), cell spacing (cellspacing), cell padding (cellpadding), the cells across columns (colspan), content alignment (align)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表格属性</title>
</head>
<body>
<table align="left" border=2 cellspacing="1" cellpadding="3" >
<tbody align="center">
<tr>
<td>学号</td>
<td>姓名</td>
<td>性别</td>
</tr>
<tr>
<td>1717</td>
<td>猪</td>
<td rowspan="2">母</td>
</tr>
<tr>
<td>1717</td>
<td>猪</td>
</tr>
<tr>
<td>1111</td>
<td>狗</td>
<td>公</td>
</tr>
<tr>
<td colspan="2">按钮</td>
</tr>
<tr >
<td colspan="3">按钮</td>
</tr>
</tbody>
</table>
</body>
</html>
Forms
标签 <form>...</form>
Role gather user input of content (text, files)
Properties action: submitted to the server-side address
method: Specifies which HTTP method used to submit: post, get
name: identifier
autocomplete: whether the browser can automatically fill
enctype: Specifies the content encoding form
Form elements
input: text, password, radio, checkbox, buttons, numeric, date, color, range, e-mail, URL, file
select: drop-down list
textarea: Text field
button: Button
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form name="test" id="1" action="" method="POST/GET" autocomplete="" enctype="UTF-8">
<input type="text" maxlength="10" value="文本"/>
</br>
<input type="password"/>
</br>
<input name="gender" value="0" type="radio">男
<input name="gender" value="1" type="radio">女
</br>
<input value="0" type="checkbox">电影
<input value="1" type="checkbox">音乐
<input value="2" type="checkbox">美术
<input value="3" checked type="checkbox">被锁定
</br>
<input type="button" value="按钮">
</br>
<input type="number">
</br>
<input type="date">
</br>
<input type="color">
</br>
<input min="10" max="50" type="range">
</br>
<input type="email">
</br>
<input type="submit">
</br>
<input type="url">
</br>
<input type="file" multiple="multiple">
</br>
<select name="" id="" multiple size="2">
<option value="">易烊千玺</option>
<option value="">刘昊然</option>
<option selected value="">谭松韵</option>
</select>
</br>
<select name="" id="" >
<option value="">易烊千玺</option>
<option value="">刘昊然</option>
<option value="">谭松韵</option>
</select>
</br>
<style>
textarea{
resize:none;
}
</style>
<textarea rows="3" cols="8">
哈哈哈哈哈哈哈哈哈哈哈哈
</textarea >
</br>
<button type="submit" form="1">
提交
</button>
</br>
<button type="reset" form="1">
重置提交
</button>
</br>
</form>
<button type="submit" form="1">
1提交
</button>
</br>
<button type="submit" name="test">
2提交
</button>
</br>
</body>
</html>