By GokiSoft.com| 21:06 22/08/2022|
Học HTML5 - CSS3

[Source Code] Tìm hiểu table & form trong HTML - C2206L

#form.html


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Form in HTML</title>
</head>
<body>
<form>

<label>Text <label style="color: red">*</label>:</label>
<input required type="text" style="width: 300px; font-size: 20px;">
<br/>
<label>Number:</label>
<input type="number" style="width: 300px; font-size: 20px;">
<br/>
<label>Email <label style="color: red">*</label>:</label>
<input required type="email" style="width: 300px; font-size: 20px;">
<br/>
<label>Phone <label style="color: red">*</label>:</label>
<input required type="tel" style="width: 300px; font-size: 20px;">
<br/>
<label>Birthday:</label>
<input type="date" style="width: 300px; font-size: 20px;">
<br/>
<label>Color:</label>
<input type="color" style="width: 300px; font-size: 20px;">

<br/>
<label>Checkbox:</label>
<input type="checkbox" style="font-size: 20px;"> Nam
<input type="checkbox" style="font-size: 20px;"> Nu


<br/>
<label>Gender:</label>
<input type="radio" style="font-size: 20px;" name="gender"> Nam
<input type="radio" style="font-size: 20px;" name="gender"> Nu


<br/>
<label>Country <label style="color: red">*</label>:</label>
<select required style="width: 180px">
	<option value="">-- Chon --</option>
	<option value="Viet Nam">Viet Nam</option>
	<option value="Lao">Lao</option>
	<option value="Campuchia">Campuchia</option>
	<option value="US">US</option>
</select>

<button type="button" style="font-size: 20px; color: red; background-color: yellow;">Gui</button>
<button type="reset" style="font-size: 20px; color: red; background-color: yellow;">Reset</button>
<button type="Submit" style="font-size: 20px; color: red; background-color: yellow;">Submit</button>

</form>
</body>
</html>


#table.html


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Table in HTML</title>
</head>
<body>
	<table border="1" cellpadding="5" style="width: 100%">
		<tr>
			<th>1 header</th>
			<th>2 header</th>
			<th>3 header</th>
		</tr>
		<tr>
			<td>1 header</td>
			<td>2 header</td>
			<td>3 header</td>
		</tr>
		<tr>
			<td>1 header</td>
			<td>2 header</td>
			<td>3 header</td>
		</tr>
		<tr>
			<td>1 header</td>
			<td>2 header</td>
			<td>3 header</td>
		</tr>
	</table>
	<br/>
	<br/>
	<br/>
	<br/>
	<br/>
	<table border="1" cellpadding="5" style="width: 100%">
		<tr>
			<th>Level 1</th>
			<th>Level 2</th>
			<th>Level 3</th>
			<th>Info</th>
			<th>Name</th>
			<th>A</th>
		</tr>
		<tr>
			<td rowspan="6">1</td>
			<td rowspan="4">2</td>
			<td rowspan="3">3</td>
			<td>4</td>
			<td>5</td>
			<th>A</th>
		</tr>
		<tr>
			<!-- <td>1</td> -->
			<!-- <td>2</td> -->
			<!-- <td>3</td> -->
			<td>4</td>
			<td>5</td>
			<th>A</th>
		</tr>
		<tr>
			<!-- <td>1</td> -->
			<!-- <td>2</td> -->
			<!-- <td>3</td> -->
			<td rowspan="4" colspan="2">4</td>
			<!-- <td rowspan="4">5</td> -->
			<th>A</th>
		</tr>
		<tr>
			<!-- <td>1</td> -->
			<!-- <td>2</td> -->
			<td>3</td>
			<!-- <td>4</td> -->
			<!-- <td>5</td> -->
			<th>A</th>
		</tr>
		<tr>
			<!-- <td>1</td> -->
			<td rowspan="2">2</td>
			<td rowspan="2">3</td>
			<!-- <td>4</td> -->
			<!-- <td>5</td> -->
			<th>A</th>
		</tr>
		<tr>
			<!-- <td>1</td> -->
			<!-- <td>2</td> -->
			<!-- <td>3</td> -->
			<!-- <td>4</td> -->
			<!-- <td>5</td> -->
			<th>A</th>
		</tr>
	</table>
</body>
</html>


Tags:



Phản hồi từ học viên

5

(Dựa trên đánh giá ngày hôm nay)

Đăng nhập để làm bài kiểm tra

Chưa có kết quả nào trước đó