Align the outer (formatting) table cells with content starting in the top left corner of the cells. Set the two columns to equal width.
Align the cells (in <td>) in the nested table (use tag to identify only the inner table) to be centered in the middle.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jake's Schedule</title>
<link rel="stylesheet" type="text/css" href="Web4.css"/>
</head>
<body>
<h1>Jacob Martin</h1>
<h3>This table shows my Fall Semester of classes</h3>
<table>
<tr>
<td class="topcolums"><span class="bold">Hometown:<br/><br/></span> Pulaski, WI<br />I have lived there for 19 years</td>
<td class="topcolums"><span class="bold"><span class="underlined">Education:<br/><br/>
</span></span> Soon to have Associates for CS<br />UW Fox Valley 2015 for Associates<br/>BA at UW Stout</td>
</tr>
<tr>
<td rowspan="2"><h2>My Favorites</h2><br/>
<ol>
<li id="musicians"><h3>Musicians</h3>
<ul>
<li class="disc">Limp Bizkit</li>
<li class="square">Kid Rock</li>
</ul></li>
<li id="hobbies"><h3>Hobbies</h3>
<ul>
<li class="disc">Running</li>
<li class="square">Video Games</li>
</ul></li>
<li id="websites"><h3>Websites</h3>
<ul>
<li class="disc">IGN</li>
<li class="square">N4G</li>
<li class="circle">WWE Network</li>
</ul></li>
</ol>
</td>
<td><table border="2">
<tr>
<th> </th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
<tr>
<th>8:00-<br/>8:59</th>
<div align="center"><td>Ethics</td>
<td rowspan="2">Data Structors</td>
<td>Ethics</td>
<td rowspan="2">Data Structors</td>
<td>Ethics</td></div>
</tr>
<tr>
<th>9:00-<br/>9:59</th>
<div align="center"><td>study</td>
<td>study</td>
<td>study</td></div>
</tr>
<tr>
<th>10:00-<br/>10:59</th>
<div align="center"><td colspan="5">Calculas II</td></div>
</tr>
<tr>
<th>11:00-<br/>11:59</th>
<div align="center"><td colspan="5">study</td></div>
</tr>
<tr>
<th>12:00-<br/>12:59</th>
<div align="center"><td colspan="5">study</td></div>
</tr>
<tr>
<th>1:00-<br/>1:59</th>
<div align="center"><td colspan="5">study</td></div>
</tr>
<tr>
<th>2:00-<br/>2:59</th>
<div align="center"><td colspan="5">study</td></div>
</tr>
<tr>
<th>3:00-<br/>3:59</th>
<div align="center"><td>Linear Algebra</td>
<td>study</td>
<td>Linear Algebra</td>
<td>study</td>
<td>Linear Algebra</td></div>
</tr>
</table></td>
</tr>
<tr><td colspan="2"><p>My goals goals for this Summer is to learn how to make webpages with HTML.<br/> I also want to learn more about Computer Programming in general.<br/> I have 4 classes and I want to be ready for my website job this fall.</p></td></tr>
</table>
<img id="image" src="../Web2/future.jpg" alt="The Future"style= width="400px" height="200px"/>
<p>a² + b² = c²</p>
<p>½ > ¼ & 0° C < 33° F</p>
<p>
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
</p>
</body>
</html>
Can I get an explanation of 1 and 2. How can i solve it? I am assuming in 1 that it meant to make the width equal which i did in CSS. If that's the case can someone explain 2.
Related
I created a nested table as per the section 3 challenge. But I don't get tables in the right alignment. Please see the picture I included below. The code I used is posted below too. Please feel free to check. Here you can see the second table is not starting exactly at the top.
The body part of HTML code is listed below. Please refer and point me where I made my mistake.
<body>
<table>
<tr>
<td> <img src="images/img11.png" alt="Master Oggway Quotes"></td>
<td>
<h1>No Name</h1>
<p>
<em>Embedded Engineer and </em>
<strong>a life long learner</strong>
</p>
<p>This is my website I will put some awesome electronics and computer science experiment I do here.</p>
</td>
</tr>
</table cellspacing="20">
<hr>
<h3>Techinical Background</h3>
<ul>
<li>Bachelor Degree in ECE</li>
<li>3 year experience in Embedded Engineering</li>
<li>C programmer, Python, web development, C++ </li>
<li>Linux shell scripting plus embedded linux programming</li>
</ul>
<hr>
<h3>WORK EXPERIENCE</h3>
<table>
<thead>
<tr>
<th>Date</th>
<th>Experience</th>
</tr>
<tbody>
<tr>
<td>2018-2019</td>
<td>SMEC LABS as Juniour Embedded Engineer</td>
</tr>
<tr>
<td>2019-PRESENT</td>
<td>QIS as Seniour Embedded Engineer</td>
</tr>
</tbody>
</thead>
</table>
<hr>
<h3>My Hobbies</h3>
<ol>
<li>Electronics DIY experimenting and Programming</li>
<li>Web development Youtuber and Blogging</li>
<li>GAME programming in Scratch and C++</li>
<li>Reading techinical articles and books</li>
<li>Dance, Swim and video games</li>
</ol>
<hr>
<h3>SKILLS</h3>
<table cellspacing="20">
<tr>
<td>
<table cellspacing="20">
<tr>
<td>Embedded C, C++</td>
<td> ✪✪✪✪✪</td>
</tr>
<tr>
<td>PCB Design using KiCAD</td>
<td> ✪✪✪✪✪</td>
</tr>
<tr>
<td>Web Designing and Python Programming</td>
<td> ✪✪✪✪</td>
</tr>
<tr>
<td>Embedded Linux and Linux System Programming</td>
<td> ✪✪✪</td>
</tr>
</table>
</td>
<td>
<table cellspacing="20">
<tr>
<td valign="top">Hardware debugging using DSO logic analyzer etc</td>
<td valign="top"> ✪✪✪✪✪</td>
</tr>
<tr>
<td valign="top">IoT and Networking</td>
<td valign="top"> ✪✪</td>
</tr>
</table>
</td>
</tr>
</table>
<h3>Hobbies Explained</h3>
<h3>CONTACT ME</h3>
</body>
You need to vertically align the contents of the td
<td valign="top">
<table> ...</table>
</td>
Demo
I've tried to look at a few web pages but none of them seem to be addressing the specific issue I'm having. I'm trying to make a web page and I'm trying to make a table aligned to the left side of the web page with while the rest in center aligned. However the items ligned in the center are pushed over to the right where the left aligned table is. How can I align something in the center without it being interefered with something aligned on the left side of the page?
Here is my code.
`<!doctype html>
<title> Webpage.</title>
<body>
<body background="Data/Back.jpg">
<table style="float: left" bgcolor="#9999FF" border="solid">
<tr>
<th><ul><h1>Directory.</h1></ul></th></tr>
<br>
<tr><td><li><a href="subpages/skills.html">Skills.</li></td></tr>
<tr><td><li><a href="subpages/experience.html">Experience.</li></td>
</tr>
<tr><td><li><a href="subpages/References">References.</li></td></tr>
<tr><td><li><a href="subpages/ContactInfo.html">Contact Info.</li>
</td></tr>
<tr><td><li><a href="subpages/Resume.html">Resume.</li></td></tr>
</table>
<center>
<table bgcolor="CCCCCC" border="3px solid black">
<tr>
<th><h1><b><u>Name/Header.</u></b></h1></th>
</tr>
</table>
<img src="Data/Me.jpg" width="25%">
<table bgcolor="#819FF7" width="50%" border="solid">
<tr>
<th>About me.</th>
</tr>
<tr>
<td>Subject
</td>
</tr>
</center>
<style type="text/css">
h1{
color: #0404B4
}
th{
color: #61380B
}
td{
color: #8A0829
}
</style>
</body>`
Simply remove float: left from the first table. Floating an element means that other elements will attempt to occupy any remaining width when that element is less than 100% of the width of the parent. Alternatively, clear the floats afterwards with clear: both.
Here's an example, cleanly formatted, and removing float: left.
h1 {
color: #0404B4;
}
th {
color: #61380B;
}
td {
color: #8A0829;
}
<body>
<table bgcolor="#9999FF" border="solid">
<tr>
<th>
<div style="margin-left: 2em">
<h1>Directory.</h1>
</div>
</th>
</tr>
<tr>
<td>
<ul>
<li>
Skills.
</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Experience.
</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
References.
</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Contact Info.
</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Resume.
</li>
</ul>
</td>
</tr>
</table>
<center>
<table bgcolor="#CCCCCC" border="3px solid black">
<tr>
<th>
<h1><b><u>Name/Header.</u></b></h1>
</th>
</tr>
</table><img src="Data/Me.jpg" width="25%">
<table bgcolor="#819FF7" border="solid" width="50%">
<tr>
<th>About me.</th>
</tr>
<tr>
<td>Subject</td>
</tr>
</table>
</center>
</body>
Hope this helps! :)
I'm getting errors starting with line 15:"Document does not allow element tr here". If I get rid of it, my chart is messed up. Did I miss or add too many tr somewhere? Of course I'll keep looking and if I find something I will post it. I was almost positive I watched my starting and ending points..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jake's Schedule</title>
</head>
<body>
<h1>Jacob Martin</h1>
<h3>This table shows my Fall Semester of classes</h3>
<table>
<tr>
<td><b>Hometown:</b> Pulaski, WI<br />I have lived there for 19 years</td>
<td><b><u>Education:</u></b> Soon to have Associates for CS<br />UW Fox Valley 2015 for Associates<br/>BA at UW Stout</td>
<tr>
<td rowspan="2"><h2>My Favorites</h2><br/>
<ol>
<li><h3>Musicians</h3></li>
<ul>
<li>Limp Bizkit</li>
<li>Kid Rock</li>
</ul>
<li><h3>Hobbies</h3></li>
<ul>
<li>Running</li>
<li>Video Games</li>
</ul>
<li><h3>Websites</h3></li>
<ul>
<li><a href=http://www.ign.com>IGN</a></li>
<li><a href=http://n4g.com>N4G</a></li>
<li><a href=http://www.wwe.com/wwenetwork>WWE Network</a></li>
</ul>
</ol>
</td>
<td><table border="2">
<tr>
<th> </th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
<tr>
<th>8:00-<br/>8:59</th>
<td>Ethics</td>
<td rowspan="2">Data Structors</td>
<td>Ethics</td>
<td rowspan="2">Data Structors</td>
<td>Ethics</td>
</tr>
<tr>
<th>9:00-<br/>9:59</th>
<td>study</td>
<td>study</td>
<td>study</td>
</tr>
<tr>
<th>10:00-<br/>10:59</th>
<td colspan="5">Calculas II</td>
</tr>
<tr>
<th>11:00-<br/>11:59</th>
<td colspan="5">study</td>
</tr>
<tr>
<th>12:00-<br/>12:59</th>
<td colspan="5">study</td>
</tr>
<tr>
<th>1:00-<br/>1:59</th>
<td colspan="5">study</td>
</tr>
<tr>
<th>2:00-<br/>2:59</th>
<td colspan="5">study</td>
</tr>
<tr>
<th>3:00-<br/>3:59</th>
<td>Linear Algebra</td>
<td>study</td>
<td>Linear Algebra</td>
<td>study</td>
<td>Linear Algebra</td>
</tr>
</tr>
</table></td>
</tr>
<td colspan="2"> <p>My goals goals for this Summer is to learn how to make webpages with HTML.<br/> I also want to learn more about Computer Programming in general.<br/> I have 4 classes and I want to be ready for my website job this fall.</p></td>
</table>
<img src="future.jpg" alt="The Future" style="width:400px;height:200px;"/>
<p>a² + b² = c²</p>
<p>½ > ¼ & 0° C < 33° F</p>
</body>
</html>
The first two table rows are missing the close /tr tag.
Dreamweaver is encountering a new tr tag on line 15 without the previous tr tag being close. It also happens again on line 40.
you have missed one closed bracket of <tr>. put here.
<td colspan="2">
<p>My goals goals for this Summer is to learn how to make webpages with HTML.<br/> I also want to learn more about Computer Programming
in general.<br/> I have 4 classes and I want to be ready for my website job this fall.</p></td>
</tr>
</table>
I am attempting to align two separate tables in html. I want them centered with one on the left, one on the right and some space between the tables. Here is the code I currently have set up. I have them aligned, but one is left and one is right with lots of space between them. New to Html please would be appreciated!
<h1>
Retrofit</h1>
<p>
Kendell Retrofit is the latest division to the Kendell divisions. Our Retrofit team includes customer service, outside sales, production and keying specialists. </p>
<div>
<table style="float:left">
</table>
<table align="left" border="0" cellpadding="0" cellspacing="2" style="width: 150px;">
<thead>
<tr>
<th scope="col" style="text-align: left;">
Markets:<br />
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<ul>
<li>
Commercial</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Financial</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Global</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Government</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Healthcare</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Higher Education</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
K-12 Education</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Retail</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
<div>
<table style="float:right">
</table>
<table align="right" border="0" cellpadding="0" cellspacing="2" style="width: 150px;">
<thead>
<tr>
<th scope="col" style="text-align: left;">
<p>
Brands:</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<ul>
<li>
Arrow</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Best</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Corbin Russwin</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Dorma</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Falcon</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Kwikset</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Sargent</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Schlage</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Stanley</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Weiser</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Yale</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
<hr />
<p>
</p>
Basic nested table will do it.
<table width="600px" >
<tr>
<td style="width: 50%;" >
<table width="100%" >
<tr>
<td>
content of left side
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="width: 50%;" >
<table width="100%" >
<tr>
<td>
content of right side
</td>
</tr>
</table>
</td>
</tr>
</table>
Check it here
Note: margin: 0 auto; makes your table at the center
Instead of using float left/right use inline-table as shown below:
table
{
display:inline-table;
}
This way you can have tables side by side.
If you change the value of "style="width: 150px" by one more high (200px or 250px), does it work ?
You only need to float the first table. Then you simply add margin-right: 50px; (for example) to it and the second one will be next to it, 50px away. If you want to center them both, put them in a div with some width and add margin: 0 auto;. Here is a jsbin example.
P.S.: Press edit in top-right corner to see the code. The good thing about using this float to the first table, with 2 seperate tables and with margin: 0 auto; to the parent div is that it is responsive. Try resizing the browser window and you will see how the tables seperate on smaller resolutions (good for a website that is designed to run on smartphones too)
They are misaligned because you have Markets:<br /> in first table and <p>Brands:</p> in second table. You need to be consistent with them.
You can use float:left; and margin-right on the first div to get the spacing.
JSBin sample (Seems like Fiddle is down)
See this DEMO
You can try on the second table :
<table style="float:left">
and replace on the second table :
align="right"
with
align="left"
I wanted it to have a table which was half red and half blue, with some padding between the borders and the text. I just can't figure out why the padding property isnt apply in this
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Practice Exercise </title
<style>
.red{background-color:red}
.blue{background-color:blue}
table{border-collapse:collapse;padding:40px;}
</style>
</head>
<body>
<table border ="1">
<tr>
<th class="red"> State </th>
<th class="blue"> Capital </th>
</tr>
<td class="red"> Utah </td>
<td class="blue"> Salt Lake City </td>
</tr>
<td class="red"> Texas </td>
<td class="blue"> Austin </td>
</tr>
<td class="red"> Tennesse </td>
<td class="blue> Nashville </td
</tr>
</table>
</body>
</html>
You had a lot of typos in you markup:
i will point them all up.
<table border="1">
<tr>
<th class="red">State</th>
<th class="blue">Capital</th>
</tr>
<tr> <!-- missing -->
<td class="red">Utah</td>
<td class="blue">Salt Lake City</td>
</tr>
<tr> <!-- missing -->
<td class="red">Texas</td>
<td class="blue">Austin</td>
</tr>
<tr> <!-- missing -->
<td class="red">Tennesse</td>
<td class="blue">Nashville</td> <!-- missing one " after blue, and one > after </td -->
</tr>
</table>
also: you applied the padding on the table, you should have applied it on the td, th like this:
CSS
td, th
{
padding: 5px;
}
Working Fiddle