[TIL] 2021-08-03

33927 ワード
TIL テキストリンク

テーブルで遊ぶ


ソースコード

<!DOCTYPE html>
<html lang="ko">
<html>
<head>
<meta charset=utf-8>
<title>table 연습</title>
<style>
table {
	border-collapse: collapse;
}

td {
	border: 1px solid;
	width: 120px;
	height: 40px;
}

.mon td {
	border: 7px solid;
	width: 0px;
	height: 0px;
}
</style>
</head>
<body>
	<table>
		<tr>
			<td rowspan="3"></td>
			<td colspan="3"></td>
		</tr>
		<tr>
			<td colspan="3"></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</table>
	<br>
	<table>
		<tr>
			<td rowspan="3"></td>
			<td colspan="3"></td>
		</tr>
		<tr>
			<td colspan="2"></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</table>
	<br>
	<table>
		<tr>
			<td></td>
			<td colspan="2" rowspan="2"></td>
			<td rowspan="3"></td>
		</tr>
		<tr>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</table>

	<br>

	<table class="mon">
		<tr>
			<td colspan="4" rowspan="4" style="width:240px; height:120px; background: #f65b46;"></td>
			<td colspan="2" rowspan="2" style="width:120px; height:30px; background: #fcec60;"></td>
		</tr>
		
		<tr>
		</tr>
		
		<tr>
			<td rowspan="2" style="width:60px; height:30px;"></td>
			<td rowspan="2" style="width:60px; height:120px;"></td>
		</tr>
		
		<tr>
		</tr>
		
		<tr>
			<td colspan="2" rowspan="2" style="width:70px; height:120px; background: black;"></td>
			<td colspan="2" style="width:60px; height:30px;"></td>
			<td colspan="2" style="width:60px; height:30px;"></td>
		</tr>
		
		<tr>
			<td colspan="2" style="width:60px; height:30px;"></td>
			<td colspan="2" style="background: #202e5b;"></td>
		</tr>
	</table>
</body>
</html>

実行結果



フォームタグ


サーバが作成されていなくても、フォームラベルに値を渡すことができます.https://www.w3schools.com/action_page.phpページをaction値に設定すればいいです.

ソースコード

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Form</title>
</head>
<body>
	<form action="https://www.w3schools.com/action_page.php">
		First name:<br> <input type="text" name="firstname" value="미키"> <br>
		Last name:<br> <input type="text" name="lastname" value="마우스"> <br>
		<input type="submit">
	</form>
</body>
</html>

実行結果




初めてhtmlを練習したときはよく使ったようです.
eos-unittest
Docker学習ノート(五)-fixbug 2-Hash sum mismatch