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
Related
I'm working on some HTML code for which I was given a UI. I tried to do most to make it look as close as possible. But I'm stuck with the header and line spacing pieces. Here is my code:
<div>
Hello, Alice! Here are your appointments for the day:
</div>
<div style="font-style:italic">
**All times are Arizona Time**
</div>
<table style="border:1px solid #e9e9e9">
<thead bgcolor="#8c8c8c" style="border-bottom:1px solid #e9e9e9; padding:none !important">
<tr>
<th style="width:auto">10:00AM - 10:30AM (30 MIN)</th>
<th style="width:auto; float:right">Abc</th>
</tr>
</thead>
<tbody>
<tr>
<td><div style="line-height:2em">
Topic:</div></td>
<td><div>Resume Review</div></td>
</tr>
<tr>
<td><div style="line-height:2em">Phone:</div></td>
<td>1234567890</td>
</tr>
<tr>
<td><div style="line-height:2em">Email:</div></td>
<td>abc#gmail.com</td>
</tr>
<tr>
<td><div style="line-height:2em">Student notes:</div></td>
<td>Hello,
My resume is pretty ugly, I built it based on what I learned in TAPS in military out-processing.
I will be standing by for the phone call, I missed my last one because I mixed up the appointment time zone.</td>
</tr>
</tbody>
</table>
Note: I need to use the inline styling, I can't use external CSS in my system.
Here is the UI provided:
How can I match the UI and also make it responsive?
Instead of using table for header, you can use div.
Check the below code.
<div>
Hello, Alice! Here are your appointments for the day:
</div>
<div style="font-style:italic">
**All times are Arizona Time**
</div>
<div style="border: 1px solid black">
<div style="width:100%; background-color:#8c8c8c; height:20px; display:flex;justify-content:space-between;align-items:center">
<p>10:00AM - 10:30AM (30 mins)</p>
<p>Data</p>
</div>
<table>
<tbody>
<tr>
<td>
<div style="line-height:2em">
Topic:</div>
</td>
<td>
<div>Resume Review</div>
</td>
</tr>
<tr>
<td>
<div style="line-height:2em">Phone:</div>
</td>
<td>1234567890</td>
</tr>
<tr>
<td>
<div style="line-height:2em">Email:</div>
</td>
<td>abc#gmail.com</td>
</tr>
<tr>
<td>
<div style="line-height:2em">Student notes:</div>
</td>
<td>Hello, My resume is pretty ugly, I built it based on what I learned in TAPS in military out-processing. I will be standing by for the phone call, I missed my last one because I mixed up the appointment time zone.</td>
</tr>
</tbody>
</table>
</div>
How to make individual cells in a table a hyperlink in html?
This is how I tried to make it and it did not work:
<table>
<tr>
<td id="Home">Home
</td>
<td id="Locations">Locations
</td>
<td id="Accomodation">Accomodation
</td>
<td id="Transport">Transport
</td>
<td id="Contact">Contact Us
</td>
</tr>
</table>
The problem is not the table, it's that there is no content in the <a> tag, so, there's nowhere to click to trigger the link. Try this:
<table>
<tr>
<td id="Home">
Home
</td>
<td id="Locations">
Locations
</td>
<td id="Accomodation">
Accomodation
</td>
<td id="Transport">
Transport
</td>
<td id="Contact">
Contact Us
</td>
</tr>
</table>
The reason it didn't work because you didn't write home inside the tag.
To make any text hyperlink, you have to put that text inside the tag.
In your case, you can make hyperlinks easily by putting Home, Location etc inside the the a tag like this:
<table>
<tr>
<td id="Home">
Home
</td>
<td id="Locations">
Locations
</td>
<td id="Accomodation">
Accomodation
</td>
<td id="Transport">
Transport
</td>
<td id="Contact">
Contact Us
</td>
</tr>
</table>
I think the problem here is that your tags actually does not show anything, so have 0px width tags. you can put test inside the tags, which will work. Example:
Home
I have been working a lot on 2 columns inside of a table with the foundation framework. I cannot understand why column 2 is going down under column 1, when I resize my window to under 600px? I would like that the columns are staying beside each other, when the window is resized. I have set the column to fill 6 each, so the second column should not jump down?
Does anybody knows how I can solve this? The code is for email newsletter, that is why I am using tables.
I have a JSfiddle with the CSS code aswell: jsfiddle
<body>
<table class="body">
<tr>
<td class="center" align="center" valign="top">
<center>
<table class="row footer">
<tr>
<td class="wrapper">
<table class="six columns">
<tr>
<td class="left-text-pad">
<h5>Column 1</h5>
<table>
<tr>
<td>
A content text 1
</td>
</tr>
</table>
<h5>A Headline</h5>
<table>
<tr>
<td>
A content text 2
</td>
</tr>
</table>
<h5>A Headline</h5>
<table>
<tr>
<td>
A content text 3
</td>
</tr>
</table>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
<td class="wrapper">
<table class="six columns">
<tr>
<td class="left-text-pad">
<h5>Column 2</h5>
<table>
<tr>
<td>
A content text 1
</td>
</tr>
</table>
<h5>A Headline</h5>
<table>
<tr>
<td>
A content text 2
</td>
</tr>
</table>
<h5>A Headline</h5>
<table>
<tr>
<td>
A big text to test if the text is responsive.
</td>
</tr>
</table>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
</body>
Above first wrapper class there is a tag.So write style inside tr tag like
As of this writing, there is still use of the nested table layout for most email clients. The answer for this is simple: Not all clients are up to speed, not all computers are up to speed.
Using tables in html emails is the most practiced and best method for overall deployment regardless of your email client. Foundation is nice, yes - but it is not the email industry standard as of yet.
Take a look at this handy tutorial from Mailchimp. I just wanted to clarify that you are not wrong for doing it this way, and you will be better off learning responsive email coding from the aforementioned tutorials first.
All that being said - what you've done in your jsfiddle is actually correct. But if you do NOT want them to collapse, simply remove the #media query strings.
Add "float: left" to the second wrapper of column2
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"