[TIL] 2021-08-03
テーブルで遊ぶ
ソースコード
<!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を練習したときはよく使ったようです.
Reference
この問題について([TIL] 2021-08-03), 我々は、より多くの情報をここで見つけました
https://velog.io/@mimah/TIL-2021-08-03
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
<!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を練習したときはよく使ったようです.
Reference
この問題について([TIL] 2021-08-03), 我々は、より多くの情報をここで見つけました https://velog.io/@mimah/TIL-2021-08-03テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol