0
Web Dev Code Repo 22.2 styling tables
Hi. I need help with Web Dev Code Repo 22.2 styling tables. Here is my outcome. Please, corrections.https://www.sololearn.com/learning/1141/5264/14138/1
7 Answers
+ 1
/*if you want it to look like the example*/
table{
border-collapse:collapse;
}
td, th {
border: 1px solid black;
padding: 10px;
}
th{
background-color:#2493df;
color:#ffffff;
}
+ 1
Lusine Galstyan Nikolay
There's no css. Try copy-pasting your css
+ 1
0
Thank you. But anyway why the expected appearance of the table is a bit different than what I got? Did you receive exactly the same as the expected?
0
is it the color, size or font?
I can't say without seeing your code for the repo.
But maybe some other css code is affecting your table.
0
<html>
<body>
<section>
<h1 font-size: 20px;>The Eiffel Tower</h1>
<a href="https://sololearnassets.azureedge.net/eiffel-tower.jpg" target="_blank" alt="The Eiffel Tower" width="30%"></a>
<p>The <strong {color: #2493df;}>Eiffel Tower</strong> is a wrought-iron tower that stands 1,063 ft (324 m) tall in <strongb>Paris</strong>. </p>
<p>, the <strong>Eiffel Tower</strong> is the most-visited monument in the world with over <strong>7 million</strong> visitors a year. </p>
<p>Visitors can choose to go up using the Tower lift or the stairs. There are <strong>1,665</strong> steps to the top.</p>
<p><b>Transport</b></p>
<ul>
<li> Bus: lines 42, 69, 72, 82 and 87.</li>
<li> Metro: Trocadero, Ecole militaire.</li>
<li> Train: Champ de Mars - Tour Eiffel, line C. </li>
</ul>
<p><b>Prices</b></p>
<table border="1">
<tr>
<th>Category</th>
<th>Prices</th>
</tr>
<tr>
<td>Adults </td>
<td>$12</td>
</tr>
<tr>
<td>Children</td>
<td>$5</td>
</tr>
</table>
</section>
<section>
<form>
<label for="name" {font-size: 16px; font-weight: bold;}>Adults</label>
<input type="number" id="name"> <br><br>
<label for="name" {font-size: 16px; font-weight: bold;}>Children</label>
<input type="number" id="name"><br><br>
<input type="button" value="Buy">
</form>
</section>
<footer {font-size: 14px;
color: #595959;
text-align: center;
margin: 10px; 0px;0px;0px;
} align="center">©Copyright</footer>
</body>
</html>
0
h1 {
letter-spacing: 2px;
margin: 10px; 0px;10px;0px;
}
.footer {
margin: 10px; 0px;0px;0px;
}
.section-padding {
10px;
}
section {
background-color:white;
}
.strong {
color: #2493df;
font-weight:strong;
padding:10px;
}
#trans {
list-style-type:square;
list-style-position:inside;
padding-left:30px;
}
table {
border-collapse:collapse;
}
td, th {
border: 1px solid black;
padding: 10px;
}
th{
background-color:#2493df;
color:#ffffff;
}
.label {
font-size:16px;
font-weight:bold;
padding:10px;
}
#buy{
background-color:#687373;
margin-top:10px;
color:#fcfcfc;
}
footer {
color: #595959;
font-size:14px;
text-align:center;
margin-top:10px;
}
input[type="number"] {
padding:2px;
text-align: center;
width:50px;
}
input[type="button"] {
background-color:#2493df;
font: bold 16px white;
border: none;
}