HTML Table Colspan - html

I am making a calendar using the following HTML code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head></head>
<body>
<table border="1">
<tr>
<td colspan="2">Mon</td>
<td colspan="2">Tue</td>
<td colspan="2">Wed</td>
<td colspan="2">Thu</td>
<td colspan="2">Fri</td>
</tr>
<tr>
<td colspan="1">Item1</td>
<td colspan="9">Item2</td>
</tr>
</table>
</body>
Each day has a colspan of 2 so that I can show whether an item takes place just in the morning or for a whole day etc.
In the above example I want "Item1" to show in the first cell (Mon morning) and "Item2" to show from Mon afternoon through to Fri.
However, when viewing the output, "Item1" is taking up the whole of Mon and "Item2" is displaying from Tue to Fri.
Is it possible to do what I am trying to do?
Thanks


I think the problem is that you'll actually have to have a row with colspan="1" in order for your spans to actually work.
If you're actually representing am/pm in your calendar, why not just add a row under the "Mon Tue ... Fri" row, like so:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
td,th { min-width: 50px; }
</style>
</head>
<body>
<table border="1">
<thead>
<tr>
<th colspan="2">Mon</th>
<th colspan="2">Tue</th>
<th colspan="2">Wed</th>
<th colspan="2">Thu</th>
<th colspan="2">Fri</th>
</tr>
<tr>
<th>AM</th>
<th>PM</th>
<th>AM</th>
<th>PM</th>
<th>AM</th>
<th>PM</th>
<th>AM</th>
<th>PM</th>
<th>AM</th>
<th>PM</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="1">Item1</td>
<td colspan="9">Item2</td>
</tr>
</tbody>
</table>
</body>
</html>
I also put the headers into a <thead> and the actual items into a <tbody>, and made the headers <th> tags instead of <td>.


Try this:
<td colspan="1">Item1</td>
<td colspan="1"> </td>
<td colspan="8">Item2</td>

Related

HTML trying to stylize table header

Here is my current code for my table. I am trying to make the table header "Famous Monsters by Birth Year" the color red and cannot figure out for the life of me how to do it.
<html>
<head>
<title>Table Time</title>
</head>
<body>
<table style="border-collapse:collapse;">
<thead>
<tr>
<th colspan="2">Famous Monsters by Birth Year</th>
</tr>
<tr style="border-bottom:1px solid black;">
<th style="padding:5px;"><em>Famous Monster</em></th>
<th style="padding:5px;border-left:1px solid black;"><em>Birth Year</em></th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding:5px;">King Kong</td>
<td style="padding:5px;border-left:1px solid black;">1933</td>
</tr>
<tr>
<td style="padding:5px;">Dracula</td>
<td style="padding:5px;border-left:1px solid black;">1897</td>
</tr>
<tr>
<td style="padding:5px;">Bride of Frankenstein</td>
<td style="padding:5px;border-left:1px solid black;">1944</td>
</tr>
</tbody>
</table>
</body>
</html>

If you do not want to use a separate CSS file and simply want to make the header red within your html you can do the following:
<th colspan="2"><font color="red">Famous by Birth Year</font></th>
But as the collor attribute of the font tag is not supported by HTML5 I would recommend using in-line CSS:
<th colspan="2" style="color:red">Famous by Birth Year</th>

HTML multiple table column issue

I have one question regarding the HTML tables that I couldn't manage to find myself.
Is it possible to create this layout using HTML and inline css within one table?
I tried to merge my cells in 4th row (I've started with 3 column layout) because I need 2 cells, and if my table width is 640px, and I force 320px for both cells, whole table gets messed up.
EDIT: 4th row is the issue, I need 2 equal width cells in it.
Thanks in advance.

<table border=1>
<tr>
<td colspan="4">Cell</td>
</tr>
<tr>
<td>Cell</td>
<td colspan="2">Cell</td>
<td>Cell</td>
</tr>
<tr>
<td colspan="4">Cell</td>
</tr>
<tr>
<td colspan="2">Cell</td>
<td colspan="2">Cell</td>
</tr>
</table>

All cells in the same column have to be the same width, so you need an extra column:
First row: one cell colspan=4
second row: one cell, on cell colspan=2, one cell
Third row: one cell colspan=4
Fourth row: one cell colspan=2, one cell colspan=2
The widths for each column then look something like:
Column 1 is narrow, let's say width=50px
Column 2 is 320 - column1's width, 280px
Column 3 same as 2, 280px
Column 4 same as 1, e.g. 50px

<table border="1">
<tr>
<td colspan="4">cell</td>
</tr>
<tr>
<td>cell</td>
<td colspan="2">cell</td>
<td>cell</td>
</tr>
<tr>
<td colspan="4">cell</td>
</tr>
<tr>
<td colspan="2">cell</td>
<td colspan="2">cell</td>
</tr>
</table>

<table border="1" width="100%">
<tr>
<td colspan="4">Cell</td>
</tr>
<tr>
<td width="10%">Cell</td>
<td colspan="2">Cell</td>
<td width="10%">Cell</td>
</tr>
<tr>
<td colspan="4">Cell</td>
</tr>
<tr>
<td colspan="2" width="50%">Cell</td>
<td colspan="2" width="50%">Cell</td>
</tr>
Check the DEMO

Use like this. it works
<!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>Untitled Document</title>
<style>
td{
text-align:center;
}
</style>
</head>
<body>
<table width="640" cellspacing="5">
<tr>
<td colspan="4">Cell</td>
</tr>
<tr>
<td>Cell</td>
<td colspan="2">Cell</td>
<td>Cell</td>
</tr>
<tr>
<td colspan="4">Cell</td>
</tr>
<tr>
<td colspan="2">Cell</td>
<td colspan="2">Cell</td>
</tr>
</table>
</body>
</html>

Send email with Oracle

I'm sending email in Oracle 11g with apex_mail.send function. I have below html structure. I have added style for table in this html. but when i open received email, style is not applied to the table. only text is visible.
How can i solve this ?
<html>
<head>
<style>table{border-collapse:collapse;}table,td,th{border:1px solid grey;}td,th{padding:5px;}</style>
</head>
<body>
<table width="100%">
<tr>
<th scope="col">Company</th>
<th scope="col">Amount</th>
<th scope="col">Reference</th>
<th scope="col">Note</th>
</tr>
<tr>
<td>HNB</td>
<td>226</td>
<td>..952</td>
<td>Insurance payment.</td>
</tr>
<tr>
<td>AC</td>
<td>2150</td>
<td>..255</td>
<td>A/C service.</td>
</tr>
</table>
</body>
</html>

Table formatting issue Chrome vs IE/FireFox

Can anyone tell me why this table looks perfect in Chrome but not in IE or FireFox?
<!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></head>
<body>
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="2" rowspan="2" style="padding-left:6px;"><img src="http://www.purelycustom.com/name_decals/style2/borders/tl_black_blue.png" /></td>
<td colspan="4" style="height:15px; background-color:#00F"></td>
<td rowspan="4"><img src="http://www.purelycustom.com/name_decals/style2/borders/right_black_blue.png" /></td>
</tr>
<tr>
<td colspan="4" height="13px" style="background-color:#000"></td>
</tr>
<tr>
<td rowspan="2"><img src="http://www.purelycustom.com/name_decals/style2/borders/l_black.png" /></td>
<td colspan="2" style="background-color:#000000"><img src="http://www.purelycustom.com/name_decals/style2/flags/flag.png" /></td>
<td style="background-color:#000000"><span style="color:#FFFFFF">YOUR</span></td>
<td style="background-color:#000000" width="15px"></td>
<td style="background-color:#000000"><span style="color:#FFFFFF">NAME</span></td>
</tr>
<tr>
<td style="background-color:#000000" colspan="5"></td>
</tr>
</tbody>
</table>
</body>
</html>
I included the !DOCTYPE declaration because I know that that has an affect on how the table gets displayed.

set the width of the 1st td in your tr's... if you add align="right" to the td the images will line up.. may override when adding specific widths to tds
something more effective would be a div with a background image instead of messing with table alignment..

How to do Alignment setting of table within a table?

I have to create a simple table within a table. i am using following html code for making as simple page. please copy and paste it to file for understand the problem correctly.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<BODY>
<table border=1>
<tr>
<td>
<table>
<tr>
<td>thid entry should be on top</td>
</tr>
<tr>
<td>why this comes in middle</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>entry1</td>
</tr>
<tr>
<td>entry2</td>
</tr>
<tr>
<td>entry3</td>
</tr>
<tr>
<td>entry4</td>
</tr>
<tr>
<td>entry5</td>
</tr>
</table>
</td>
</tr>
</table>
</BODY>
</HTML>
The main problem is in my right side part of table I have some searched information, and left side some refine search panel. so when my page comes, my refine search window comes exact middle. i want my left part of table is to aligned on table, where my start.
Please help me to resolve this.

valign="top" in the correct column would be a simple solution to your prob.
like:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<BODY>
<table border=1>
<tr>
<td valign="top">
<table>
<tr>
<td>thid entry should be on top</td>
</tr>
<tr>
<td>why this comes in middle</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>entry1</td>
</tr>
<tr>
<td>entry2</td>
</tr>
<tr>
<td>entry3</td>
</tr>
<tr>
<td>entry4</td>
</tr>
<tr>
<td>entry5</td>
</tr>
</table>
</td>
</tr>
</table>
</BODY>
</HTML>
edit:
style="vertical-align:top;" if you use css