By GokiSoft.com| 19:19 13/10/2023|

Học HTML5 - CSS3

Bài tập ôn luyện Table - Lập trình HTML/CSS/JS

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

5

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

Do Trung Duc

2020-10-14 04:03:00

#bullet.jpg

https://res.cloudinary.com/wegoup/image/upload/v1602648169/mdpgf63gagr5fw6wpdk7.jpg

#email.css

body{
background-color: rgb(255,255,240);
padding-left: 20%
}

.textarea{
overflow: auto;
}

.imgHelp{
	cursor: help;
}

.EmailEditor{
	background-color: #FFFFDD
}

.main{
	width: 500px;
	background-color: #DDFFEE;
	padding-left: 10px;
	padding-right: 10px;
}

#help{
	position: absolute;
	height: 500px;
	width: 420px;
	top: 10px;
	background-color: #cfc;
	color: #303030;
	border: #E4E7E7 solid 2px;
}

.close{
	text-align: right;
	color: blue;
	cursor: hand;
}

ul{
	list-style-type: none;
	text-align: right;
}
li{
	padding: 2px;
	margin-right: 60px;
}

.ul_help{
	list-style-image: url(bullet.jpg);
	text-align: left;

}

#EmailEditor.html

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="email.css">
</head>
<body>

<div class="main">
	<div>
		<b style="background-color: #DDFFEE">Compose e-email messeage</b>
		<b style="margin-left: 550px; margin-top: 0px ;background-color: #DDFFEE;"><a href="help.html">Help</a></b>
	</div>

	<form>
		<ul>
			<li>To: <input type="e-email" name="receiver" size="40px"></li>
			<li>From: <input type="e-email" name="sender" size="40px"></li>
			<li>Cc: <input type="text" name="Cc" size="40px"></li>
			<li>Sub: <input type="text" name="Sub" size="40px"></li>
			<li >Message: <input type="messeage" name="Message" style="width: 310px; height: 200px; vertical-align: top; overflow: auto"></li>
		</ul>
	</form>
	<button style="margin-left: 120px">Send</button>
	<button>Cancel</button>

</div>

</body>
</html>

#help.html

<!DOCTYPE html>
<html>
<head>
	<title>Help</title>
	<link rel="stylesheet" type="text/css" href="email.css">
</head>
<body>
	<div class="main">
		<b>E-mail Editor Help</b>
		<ul class="ul_help">
			<li>
				To and Cc:<br/>
				To and Cc boxes allow you to enter the email address of the receptients to whom to messsage has to be sent. Reciptiens will be able to see who else was sent the messasge by looking at the contents of the To and Cc boxes
			</li>

			<li>
				Subject:<br/>
				The Suject box allows you to enter meaning ful summary of the message
			</li>

			<li>
				Message:<br/>
				The Message TextArea allows you to enter the text of your message
			</li>
			<p><a href="Status.html">Close</a></p>
		</ul>

	</div>
</body>
</html>

#Help.jpg

https://res.cloudinary.com/wegoup/image/upload/v1602648169/ijifwxrlk45isyacwwfl.jpg

#Status.html

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<b>Your message has been successful sent</b>
</body>
</html>

Nguyễn Tiến Đạt

2020-10-13 14:14:23

Bài 2

<!DOCTYPE html>
<html>
<head>
	<title>Dssd</title>
	<style>
		table{
			text-align: center;
			empty-cells: show;
		}
		.dat{
			width: 169px;
		}
	</style>
</head>
<body>
	<table border="1px solid">
		<caption>Airplane Comparison</caption>
		<tr>
			<th rowspan="3" colspan="3" class="dat"></th>
			<th rowspan="3" colspan="2" width="100px">Laserjet 45 Super</th>
			<th colspan="2">Airbus</th>
			<th colspan="3">Boeing</th>
		</tr>
		<tr>
			<th rowspan="2">A321</th>
			<th rowspan="2">A320</th>
			<th rowspan="2" width="45px">737-400</th>
			<th rowspan="2" width="45px">737-600</th>
			<th rowspan="2" width="45px">747-400</th>
		</tr>
		<tr style="height: 42px;"></tr>
		<tr>
			<th rowspan="2" colspan="3">CO2 Emission Rate
			<br>(kg/km)</th>
			<td rowspan="2" colspan="2">1.766</td>
			<td rowspan="2">9.074</td>
			<td rowspan="2" >9.149</td>
			<td rowspan="2">9.360</td>
			<td rowspan="2" >7.214</td>
			<td rowspan="2">30.638</td>
		</tr>
		<tr style="height: 42px;"></tr>
		<tr>
			<th rowspan="2" colspan="3">Total CO2 Emission <br>(1000 km)</th>
			<td rowspan="2" colspan="2">1766</td>
			<td rowspan="2">9074</td>
			<td rowspan="2">9149</td>
			<td rowspan="2">9360</td>
			<td rowspan="2">7214</td>
			<td rowspan="2">30638</td>
		</tr>
		<tr style="height: 42px;"></tr>
		<tr>
			<th rowspan="2" colspan="3">Flight Passenger <br>Capacity (max)</th>
			<td rowspan="2" colspan="2">9</td>
			<td rowspan="2">189</td>
			<td rowspan="2">150</td>
			<td rowspan="2">168</td>
			<td rowspan="2">145</td>
			<td rowspan="2">409</td>
		</tr>
		<tr style="height: 42px;"></tr>
		<tr>
			<th rowspan="2" colspan="3">Number of Passenger <br>(70%)</th>
			<td rowspan="2" colspan="2">6</td>
			<td rowspan="2">132</td>
			<td rowspan="2">105</td>
			<td rowspan="2">118</td>
			<td rowspan="2">102</td>
			<td rowspan="2">286</td>
		</tr>
		<tr style="height: 42px;"></tr>
	</table>
</body>
</html>

Nguyễn Tiến Đạt

2020-10-13 14:14:09

Bài 1

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>WritePad Editor</title>
	<style type="text/css">
		.style1{
			list-style-type: lower-roman;
		}
		.style2{
			list-style-type: square;
		}
	</style>
</head>
<body>
	<h2>WritePad Editor</h2>
	<p>WritePad is an editor application that allows you to create Web pages easily and quickly</p>
	<p>Steps to open WritePad application:</p>
	<ul class="style1">
		<li>Click <b>Start</b></li>
		<li>Click <b>Programs</b></li>
		<li>Click <b>WritePad</b></li>
	</ul>
	<p>Advantages of using a WritePad editor:</p>
	<ul class="style2">
		<li>It allows faster creation of Web pages.</li>
		<li>It allows easier updation of text or images in WritePad editor.</li>
		<li>It is platform independent.</li>
	</ul>
	<p>Disadvantages of using a WritePad editor:</p>
	<ul class="style2">
		<li>It consumes more memmory space.</li>
		<li>It requires to fill-in more details such as meta data for each page.</li>
	</ul>
</body>
</html>

Đức Sơn

2020-10-13 06:26:44

#WritePad Editor.html

<!DOCTYPE html>
<html>
<head>
	<title>WritePad Editor</title>
	<meta charset="utf-8">
</head>
<body>
   <b><h1>WritePad Editor</h1></b>
   <p>WritePad is an editor application that allows you to create Web pages esdily and quickly.<br>
   Step to open WritePad application:<br>
   <ol style="list-style-type: square;">
   	<li>i. Click<b>Start</b></li>
   	<li>ii. Click <b> Programs</b></li>
   	<li>iii. Click <b> WritePad</b></li>
   </ol><br>

   Advantages of using a WritePad editor:<br>
   	<ol style="list-style-type: square;">
   		<li> It allows faster creation of Web pages.</li>
   		<li> It allows easier updation of text or images in WritePad editor.</li>
   		<li> It is platform independent.</li><br>
   	</ol>
   	Disadvantages of using a WritePad editor:<br>
   	<ol style="list-style-type: square;">
   		<li> It consumes more memory space.</li>
   		<li> It requires to fill-in more details such as meta data for each page.</li>
    </ol>

</body>
</html>

nguyễn Sử

2020-10-12 16:05:04

#WritePad Editor.html

<!DOCTYPE html>
<html>
<head>
	<title> WritePad Edito </title>
	<meta charset="utf-8">
	<style type="text/css"></style>
</head>
<body>
	<h1> WritePad Editor </h1>
		<p> WritePad is an editor application that allows you to create Wed pages easily and quickly.</p>
		<p> Steps to open WritePad application: </p>
			<ol style="list-style-type: square;">
		  		<li>i.   Click <strong> Start </strong </li>
				<li>ii.  Click <strong> Programs </strong </li>
				<li>iii. Click <strong> WritePad </strong </li>
			</ol>
	<p> Advantages of using a WritePad editor. </p>
		<tr>
			<ol style="list-style-type: square;">
			<li> It allows faster creation of Wed pages. </li>
			<li> It allow easier updation of text or images in WritePad editor. </li>
			<li> It is platfrom independent. </li>
		</ol>
		</tr>
	<p> Disadvantages of using a WritePd editor. </p>
		<tr>
			<ol style="list-style-type: square;">
			<li> It consumes more memory space. </li>
			<li> It requires to fill-in more details such as meta data for each page. </li>
		</ol>
		</tr>
		 </style>
</body>
</html>

vuong huu phu

2020-10-12 14:59:21

bai 1

https://dddeee22.herokuapp.com/bai6/ba1_6.html

vuong huu phu

2020-10-12 14:58:52

bai 2

https://dddeee22.herokuapp.com/bai6/bai2_6.html

Nguyễn Anh Vũ

2020-10-12 14:17:34

#1.html

<!DOCTYPE html>
<html>
<head>
	<title>WritePad Editor</title>
	<meta charset="utf-8">
</head>
<body style="background-color: white; background-repeat: no-repeat; background-size: cover; color: black">
	<h1 title="Automobile Gallery">WritePad Editor</h1> 
<br>
WritePad is an editor application that allows you to create Wed pages easily anh quickly.
<br>

<br>
Steps to open WritePad application
<br>
<ol>
	<li>Click <b>Start</b></li>
	<li>Click <b>Programs</b></li>
	<li>Click <b>WritePad</b></li>
</ol>
<br>
Advantages of using a WritePad editor:
<br>

<br>
<ol style="list-style-type: square;">  
<li>It allows faster creation of Ưed pages.</li>
<li>It allows easier updation of text or images in WritePad editor.</li>
<li>It is platform independent</li>
</ol>
<br>
Disadvantages of using a WritePad editor:
<br>
<ol style="list-style-type: square;">
	<li>It consumes more memory space</li>
	<li>It requires to fill-in more details such as meta data ror each page</li>
</ol>	
</body>
</html>

Trần Văn Lâm

2020-10-12 13:41:13

#lesson.html

<!DOCTYPE html>
<html>
<head>
	<title>Write</title>
</head>
<body>
	<h1><b>WritePad Editor</b></h1>
	<br/>
	<p>WritePad isan editor appication that you to create Web pages easily and quickly.</p>
	<br/>
	<p>Steps to open Write appilication:</p>
	<br/>
	<ol>
		<li>Click <b>Start</b></li>
		<li>Click <b>Program</b></li>
		<li>Click <b>WritePad</b></li>
	</ol>
	<br/>
	<p>
		Advantages of using WritePad editor:
	</p>
	<ol style="list-style-type: square;">
		<li>It allows faster creation of Web pages.</li>
		<li>It allows eaier updation of text or images in WritePad edit editor.</li>
		<li>It is platform independent</li>
	</ol>
	<br/>
	<p>
		Disavantages of using a WritePad editor:
	</p>
	<br/>
	<ol style="list-style-type: square;">
		<li>It consumes more memory.</li>
		<li>It repuires to fill-in more details such as meta data for each page.</li>
	</ol>

   
</body>
</html>

Nguyễn đình quân

2020-10-12 10:12:19

#bailam4.html

<!DOCTYPE html>
<html>
<head>
	<title>WritePad Editor</title>

</head>
<body style="background-color: #90a8d6 , background-repeat: no-repeat; background-size: cover; color: black">
	<h1>WritePad Editor</h1>
	WritePad is an editor application that allows you to create Web pages easily and quickly
	<br>
	Steps to open WritePad application
	<br>
	<ul>i. Click <b> Start</b>
	<br>
    ii. Click <b>Programs</b>
	<br>
    iii.Click <b>WritePad</b></ul>
    <br>
    Advantages of using a WritePad Editor
    <br>
    <br>
    <li>It allows faster creation of Web pages</li>
    <li>It allows easiar updation of text or imagesin WritePad editor</li>
    <li>It is platform independednt</li>
    <br>
    Disadvantages of using a WritePad editor
    <br>
    <br>
    <li>It consumes more memory space</li>
    <li>It requires to fill-in more details such as  meta data for each page</li>


		



</body>
</html>

Bài tập ôn luyện Table - Lập trình HTML/CSS/JS

Tags:

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

5

Do Trung Duc

#bullet.jpg

#email.css

#EmailEditor.html

#help.html

#Help.jpg

#Status.html

Nguyễn Tiến Đạt

Bài 2

Nguyễn Tiến Đạt

Đức Sơn

#WritePad Editor.html

nguyễn Sử

#WritePad Editor.html

vuong huu phu

vuong huu phu

Nguyễn Anh Vũ

#1.html

Trần Văn Lâm

#lesson.html

Nguyễn đình quân

#bailam4.html