HTML Column width/spacing issue - html

I'm trying to help my son with a HTML project. This is to be only HTML, not CSS. He has to build a table with his school class schedule. I can't seem to get the columns to line up.
<!DOCTYPE html>
<html>
<body>
<center> Howie </center>
<p><table border="0"
cellpadding=0>
</tr>
<tr>
<th>Period</th>
<th>Class</th>
<th>Teacher</th>
</tr>
<tr>
<td>1</td>
<td>Band </td>
<td>Sletten</td>
</tr>
<tr>
<td>2</td>
<td> Intro to IT</td>
<td>Rogers</td> </tr>
</tr>
<tr>
<td>3</td>
<td>Biology</td>
<td>Braet</td>
</tr>
<tr>
<td>4</td>
<td>Study Hall</td>
<td>Mendoza</td>
</tr>
<tr>
<td>5</td>
<td>English II</td>
<td>Johnson</td>
</tr>
<tr>
<td>6</td>
<td>US History</td>
<td>Peterson</td>
</tr>
<tr>
<td>7</td>
<td>Advanced Algebra </td>
<td>Connon</td>
</tr>
<tr>
<td>8</td>
<td>Spanish II </td>
<td>Michel</td>
</table></p>
Any suggestions? Any help would be appreciated.
Thanks,
Al


Im sorry... But please look at the code first.
You are beginning with a </tr> That means you want to close a <tr>
And at the end you dont close the <tr>
Second point, why a table inside of a <p> ?
I think if you fix those minor faults.. it will be fine.
Succes with helping your son


Your HTML is malformed. Among other issues:
There is a stray closing </tr> tag just inside <table> tag which needs to be removed.
After the <td></td> containing "Rogers" is an extra </tr> which needs to be removed.
You are missing a </tr> at the end of the table before the </table> tag.
Your HTML is missing the closing </body> and </html> tags.
You should use an HTML validator, such as this one. This will help you discover these types of issues in the future.


They seem messed up because default h alignment for <th> is center and for <td> is left. If you switch th with td you should be fine.
I also agree with the other answers that you have some html issues. I recommend you write html using a specialized editor.


your open and close tags were somewhat messy.
plus I added some html alignment for the head row.
Next time use a text highlighting editor, it makes life a whole lot easier to find the issues:
jsFiddle Example
<p><table border="0" cellpadding="6" cellspacing="0">
<tr>
<th align="left">Period</th>
<th align="left">Class</th>
<th align="left">Teacher</th>
</tr>
<tr>
<td>1</td>
<td>Band </td>
<td>Sletten</td>
</tr>
<tr>
<td>2</td>
<td> Intro to IT</td>
<td>Rogers</td>
</tr>
<tr>
<td>3</td>
<td>Biology</td>
<td>Braet</td>
</tr>
<tr>
<td>4</td>
<td>Study Hall</td>
<td>Mendoza</td>
</tr>
<tr>
<td>5</td>
<td>English II</td>
<td>Johnson</td>
</tr>
<tr>
<td>6</td>
<td>US History</td>
<td>Peterson</td>
</tr>
<tr>
<td>7</td>
<td>Advanced Algebra </td>
<td>Connon</td>
</tr>
<tr>
<td>8</td>
<td>Spanish II </td>
<td>Michel</td>
</tr>
</table></p>

Related

How to align <td>s from 1 table against another?

I'm new to HTML/CSS, and I'm having a hard time aligning the Opening days, hours, closing days of the Chicken shop against the Open, Hours, and Close from the table. I want the days and time to align directly below each category. Such as Open (Sun/Mon..), Hours (9-3pm), Close (Tues/Fri). Below are my codes, any advise would be greatly appreciated!!! Thank you!!!
<table id="shops">
<tr>
<th>Shops</th>
<th>Location</th>
<th>Store Hours</th>
<th>Products</th>
</tr> <!-- Nested table for store hours and product types-->
<tr>
<td colspan="2"></td>
<td>
<table id="hours_table">
<tr>
<th>OPEN</th>
<th>HOURS</th>
<th>CLOSE</th>
</tr>
</table>
</td>
<td>
<table id="products_table">
<tr>
<th>Animals</th>
<th>Cost</th>
<th>Items</th>
<th>Cost</th>
</tr>
</table>
</td>
</tr>
<tr>
<td id="chicken_shop">Cuckoo House Chicken Shop</td>
<td>West Natura</td>
<td>
<table id="chicken_hours">
<tr>
<td>SUN/MON/WED/THURS/SAT</td>
<td>9AM - 3PM</td>
<td>TUES/FRI</td>
</tr>
</table>
</td>
</table>

Hi here is the solution:
<table id="shops" border='1'>
<tr>
<th>Shops</th>
<th>Location</th>
<th>Store Hours</th>
<th colspan="4">Products</th>
</tr> <!-- Nested table for store hours and product types-->
<tr>
<td id="chicken_shop">Cuckoo House Chicken Shop</td>
<td>West Natura</td>
<td>
<table width="333" id="hours_table" border='1'>
<tr>
<td>OPEN</td>
<td>HOURS</td>
<td>CLOSE</td>
</tr>
<tr>
<td>SUN/MON/WED/THURS/SAT</td>
<td>9AM - 3PM</td>
<td>TUES/FRI</td>
</tr>
</table>
</td>
<th>Animals</th>
<th>Cost</th>
<th>Items</th>
<th>Cost</th>
</tr>
</table>

Instead of using <th> you have to use <td> even if it is part of the table head.
<table>
<thead>
<tr>
<td>Shops</td>
<td>SOmethng</td>
<td>Something#2</td>
</tr>
</thead>
<tbody>
<tr>
<td>Something in the body of the table</td>
<td>something</td>
<tdSomething</td>
</tr>
</tbody>
</table>
I suggest using w3schools.com for additional info.Also you can add borders in case you want some borders around it.

HTML: How to create a calendar view?

I am HTML/CSS beginner attempting to create calendar view very similar to Microsoft Outlook's design as shown below:
So far, I gotten the basic outline of the calendar with the following HTML/CSS:
<html>
<head>
<title>August, 2016</title>
</head>
<body>
<center><h1>August, 2016</h1></center>
<style>
table{
table-layout: fixed;
}
</style>
<table border="1" width="1250" height="800">
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thur</th>
<th>Fri</th>
<th>Sat</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<table>
<tr>
<td>1</td>
<td></td>
</tr>
<tr>
<td></td>
<td>
Claim Benefits<br>
Pick up groceries<br>
Iron the shirts<br>
+5 more...
</td>
</tr>
</table>
</td>
<td>2</td>
</tr>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tr>
<td>3</td>
<td>4</td>
<td>
<table>
<tr>
<td>5</td>
<td></td>
</tr>
<tr>
<td></td>
<td>
Claim Benefits<br>
Pick up groceries<br>
Iron the shirts<br>
+5 more...
</td>
</tr>
</table>
</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tr>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tr>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tr>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>
Which produces:
I want to accomplish some of the same things Outlook does:
The day of the month number should be on the top left corner of the cell. I attempted to create this with a table inside the cell but it doesn't quite feel or look right. I am directly attempting to recreate Outlook's view and the way they setup the day number and reminders below it.
Each of the cells should maintain the same size while containing up to 4 hyperlinks. In the above code, the cells of the row containing hyperlinks become bigger than the cells of the other rows. I want to fix the cell size such that all cells are the same size whether they contain up to 4 hyperlinks or not.
Thanks for any helpful code or suggestions.

An easy way to position/style the calendar numbers separately from the content is to make them td pseudo-elements. You could set the content to something like attr(data-day) to have it dynamically display a number set in the HTML.
To make sure the cells have the same height, just specify a height in the CSS. Since you only want "up to 4 hyperlinks", you can just check what the height is for a cell with 4 links and then use that.
By the way, it looks like there are a lot of errors with the tr tags in your code, and I would recommend representing the listed elements inside an individual day as a list rather than as nested tables (the calendar is tabular data, but the contents of the day are a to-do list).
Here's a snippet that includes the recommended changes:
table {
table-layout: fixed;
width: 1250px;
height: 800px;
}
table td {
height: 100px;
position: relative;
}
table td:before {
content: attr(data-day);
display: block;
position: absolute;
top: 0;
left: 0;
background: yellow;
}
<center>
<h1>August, 2016</h1>
</center>
<table border="1">
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thur</th>
<th>Fri</th>
<th>Sat</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td data-day="1">
<ul>
<li>Claim Benefits</li>
<li>Pick up groceries</li>
<li>Iron the shirts</li>
<li>+5 more...</li>
</ul>
</td>
<td data-day="2"></td>
</tr>
<tr>
<td data-day="3"></td>
<td data-day="4"></td>
<td data-day="5"></td>
<td data-day="6"></td>
<td data-day="7"></td>
<td data-day="8"></td>
<td data-day="9"></td>
</tr>
<tr>
<td data-day="10"></td>
<td data-day="11"></td>
<td data-day="12">
<ul>
<li>Claim Benefits</li>
<li>Pick up groceries</li>
<li>Iron the shirts</li>
<li>+5 more...</li>
</ul>
</td>
<td data-day="13"></td>
<td data-day="14"></td>
<td data-day="15"></td>
<td data-day="16"></td>
</tr>
<tr>
<td data-day="17"></td>
<td data-day="18"></td>
<td data-day="19"></td>
<td data-day="20"></td>
<td data-day="21"></td>
<td data-day="22"></td>
<td data-day="23"></td>
</tr>
<tr>
<td data-day="24"></td>
<td data-day="25"></td>
<td data-day="26"></td>
<td data-day="27"></td>
<td data-day="28"></td>
<td data-day="29"></td>
<td data-day="30"></td>
</tr>
<tr>
<td data-day="31"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

I think You can add a flot:left; style to this month number, and maybe margin,padding:0;
I suggest to use min-height with the same value as height of all cells

First, you have not added any styling so you are leaving that up to the browser's defaults. Also, the center tag is deprecated. Use this instead:
h1 {text-align:center;}
For the table, you can add this to make the border appear like Outlooks' borders:
table, th, td {border-collapse: collapse;}
To style the table data remove the padding and margin. That should move the first td in the first tr to the top left corner.
Lastly, add a specific height to the row of each week. I would assign that tr a class of week and style with whatever height you want:
tr.week {height:200px;}

HTML code to give heading names to table having <th colpsan=2></th>

I want to implement something like this as attached in the image file... In HTML code..
Can anyone please help..
Table-Format

Try to learn from learning sites like w3schools
Here is the HTML for a table with colspan:
<table border="1" cellspacing="0" cellpadding="5">
<tr>
<td>Sl</td>
<td colspan="2">val</td>
</tr>
<tr>
<td>1</td>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>2</td>
<td>February</td>
<td>$100</td>
</tr>
</table>

HTML table column with ghost column

I'm having a werid problem making a super simple table without any css mods.
The code is the following:
<table>
<tr>
<th>ID</th>
<th>Country</th>
<th>Count</th>
</tr>
<tr>
<td>2<td>
<td>ARGENTINA<td>
<td>7379<td>
</tr>
<tr>
<td>3<td>
<td>CHILE<td>
<td>6543<td>
</tr>
<tr>
<td>4<td>
<td>EGYPT<td>
<td>6512<td>
</tr>
</table>
I'm getting crasy in trying to find what's wrong in this super simple code about why is it that the table header's columns refuse to align with its respective values?
It seems that there's an extra ghost column being created.
Can anyone explain, please?

Your lines are missing the closing . You have where the closing tags should be.
<table>
<tr>
<th>ID</th>
<th>Country</th>
<th>Count</th>
</tr>
<tr>
<td>2</td>
<td>ARGENTINA</td>
<td>7379</td>
</tr>
<tr>
<td>3</td>
<td>CHILE</td>
<td>6543</td>
</tr>
<tr>
<td>4</td>
<td>EGYPT</td>
<td>6512</td>
</tr>
</table>

Your doesn't have a closing tag.
Try this:
<table>
<tr>
<th>ID</th>
<th>Country</th>
<th>Count</th>
</tr>
<tr>
<td>2</td>
<td>ARGENTINA</td>
<td>7379</td>
</tr>
<tr>
<td>3</td>
<td>CHILE</td>
<td>6543</td>
</tr>
<tr>
<td>4</td>
<td>EGYPT</td>
<td>6512</td>
</tr>
</table>
Then it looks like it tries to create closing tags for each... And as a result you are ending up with weird extra columns.

how to create html table with css and table properties

I am creating one html table but i am confused with
Can any one help me to create table like attached image with color combinations.
Thank You.

Try this code. You can change the color according to your choice
<table border="1" width="50%">
<tr style="background-color: #090">
<th>1</th>
<th>1</th>
<th>1</th>
<th>1</th>
</tr>
<tr style="background-color: #7aba7b">
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr style="background-color: #99BC99">
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>

Some basic HTML stuff for tables:
<table> </table> = table tag
<tr> </tr> = row tag
<td> </td> = cell tag
So you put it all together like so:
<table>
<tr>
<td> cell content </td>
</tr>
</table>
Repeat rows and cells as needed. Then add some styling with some CSS or something. Now go try it!