I have trouble finding the right way to add cells into columns: Here is what I want to do:
A fiddle you get from : http://jsfiddle.net/AKrB3/
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<table style="margin-top: 40px" width="600" height="358" cellspacing="0" cellpadding="2" align="center" border="1">
<tr>
<td align="center">fasfg1
</td>
<td width="42"></td>
<td align="center">fasfg2
</td>
</tr>
</table>
</body>
</html>
Try this, with rowspan.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<table style="margin-top: 40px" width="600" height="358" cellspacing="0" cellpadding="2" align="center" border="1">
<tr>
<td align="center">fasfg1
</td>
<td width="42" rowspan="3"></td>
<td align="center" rowspan="3">fasfg2
</td>
</tr>
<tr>
<td>zroizj</td>
</tr>
<tr>
<td>zroizj</td>
</tr>
</table>
</body>
</html>
Note that it may be really hard to maintain this code if you want to add more rows in the left column in the future. It may be preferable to use 2 different tables.
I would make one more table inside the left row and add the rows to the new table
This is not a really great way to do it, but if you do it in one table, then you need separate rows for each cell and one for the rest of the items. To make the other side the same size, you must use rowspan. When you add a column, you would need to update the rowspan by one and make a new of the specific size you are inserting and remove it from the height specified by the last .
The better way to do this is by using separate tables for each band or a table inside a table.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<table style="margin-top: 40px" width="600" height="358" cellspacing="0" cellpadding="2" align="center" border="1">
<tr style="height:10px">
<td align="center">fasfg1</td>
<td width="42" rowspan="4"></td>
<td align="center" rowspan="4">fasfg2
</td>
</tr>
<tr style="height:10px">
<td align="center" height="5%">fasfg1</td>
</tr>
<tr style="height:10px">
<td align="center" height="5%">fasfg1</td>
</tr>
<tr style="height:100px">
<td align="center">fasfg1</td>
</tr>
</table>
</body>
</html>
Related
everyone,
I have designed a quick html doc that will be incorporated in Outlook (hence the need to have inline styles inside the HTML). Everything is looking fine on Chrome and on Safari, but IE11 is showing the below problem. The table border is messed up, like it has two colours inside it, instead of only one, like the good version on Chrome. Also, Firefox seems to be ignoring the table set for the colour and showing a beveled version of it... Does anyone have an idea about this? I'm pasting example image and my code below.
image depicting bug in IE against good version on Chrome
<!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>Xmas Card</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body style="margin: 0; padding: 60px 300px 60px 300px; background-color:#d2d2d1">
<table>
<tr>
<div style="text-align:center; margin-bottom:20px">
<span style="font-family:sans-serif; font-size:10pt">If you have problems opening this message, read online here</span>
</div>
</tr>
</table>
<table border="8" rules="none" bordercolor="#8a7e70" cellpadding="0px" cellspacing="0" align="center" width="600px">
<tr style="background-color:#ffffff" align="center">
<td>
<img src="#" alt="corners top">
</td>
</tr>
<tr style="background-color:#ffffff" align="center">
<td>
<img src="#" alt="logo">
</td>
</tr>
<tr style="background-color:#ffffff" align="center">
<td>
<h1 style="font-size:24pt; font-family:sans-serif; color:#aa212f; text-align:center">Season's Greetings</h1>
</td>
</tr>
<tr style="background-color:#ffffff" align="center">
<td>
<img src="#" alt="Xmas branches">
</td>
</tr>
<tr style="background-color:#ffffff" align="center">
<td>
<img src="/#" alt="button">
</td>
</tr>
<tr style="background-color:#ffffff" align="center">
<td>
<img src="#" alt="corners bottom">
</td>
</tr>
</table>
</body>
</html>
Thank you so much for your kindness.
When you want to set the table's border attribute, you should keep in mind that the border-style is required.
The definition and usage of CSS border you could refer to the following W3C document:https://www.w3schools.com/cssref/pr_border.asp
I suggest that you could set the border-color, border-style and border-width separately like:
<table style="border-color: #8a7e70; border-style: solid; border-width:8px;" rules="none" cellpadding="0" cellspacing="0" align="center" width="600">...</table>
Or you could write three attributes together:
<table style="border:8px solid #8a7e70;" rules="none" cellpadding="0" cellspacing="0" align="center" width="600">...</table>
the running result in Chrome and IE
This question already has answers here:
How to get table cells evenly spaced?
(8 answers)
Closed 6 years ago.
I have an HTML Table that is not being displayed properly. Here is a picture of the issue:
My issue is that the divider between "Current Number of cars is" and "current number of family members is" is not centered in between the two buttons. How can I go about centering this?
I have tried adding spaces after the "Current number of cars is" by doing the following:
<TD ALIGN="center"><p id="t_4"><pre> Curent Number of Cars is </pre><p id="t_red">6</p></p></TD>
but this changes the font on my text.
Here is the page source
<HTML>
<HEAD>
<LINK REL="stylesheet" HREF="/edartcss/edart_style.css" TYPE="text/css">
<LINK REL="stylesheet" HREF="/edartcss/button.css" TYPE="text/css">
<LINK REL="stylesheet" HREF="/edartcss/CalendarControl.css" TYPE="text/css">
<TITLE>eDART Generation Tickets</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
<META HTTP-EQUIV="Refresh" CONTENT="30;URL=/edartsql/john_package.loadpage">
<SCRIPT language="JavaScript" src="/edartjs/geneneration.js"></SCRIPT>
<SCRIPT language="JavaScript" src="/edartjs/CalendarControl.js"></SCRIPT>
</HEAD>
<body OnLoad="placeFocus()">
<TITLE>August Vehicle Directory</TITLE>
<TABLE border=1 align=center>
<TR>
<TD ALIGN="center" COLSPAN="5"><p id="t_1">August Family Vehicle Listing Directory</p></TD>
</TR>
<TR>
<TD ALIGN="center" COLSPAN="11"><p id="t_msg">This page lists all of the vehicles and their owners within the August family.
Please see the table below for the latest listing.</p></TD>
</TR>
<TR>
<td align =center colspan=2>
<TABLE border>
<TR>
<TD ALIGN="center"><p id="t_b">Owner</p></TD>
<TD ALIGN="center"><p id="t_b">Make</p></TD>
<TD ALIGN="center"><p id="t_b">Model</p></TD>
<TD ALIGN="center"><p id="t_b">Year</p></TD>
<TD ALIGN="center"><p id="t_b">Additional Specs</p></TD>
</TR>
<TR>
<TD ALIGN="center"><p id="t_i">John, August</p></TD>
<TD ALIGN="center"><p id="t_i">Honda</p></TD>
<TD ALIGN="center"><p id="t_i">Civic</p></TD>
<TD ALIGN="center"><p id="t_i">2012</p></TD>
<TD ALIGN="center"><div id="s_button_1" >Vehicle Details</div></TD>
</TR>
</TABLE>
</td>
</TR>
<TR>
<TD ALIGN="center"><p id="t_4">Curent Number of Cars is <p id="t_red">6</p></p></TD>
<TD ALIGN="center"><p id="t_4">Curent Number of Family Members is <p id="t_red">2</p></p></TD>
</TR>
<TR>
<td align =center colspan=2>
<TABLE >
<TD ALIGN="center"><div id="s_button_1" >Add Vehicle</div></TD>
<TD ALIGN="center"><div id="s_button_1" >Add Member</div></TD>
</TABLE>
</td>
</TR>
</TABLE>
</BODY>
</HTML>
Add style="width:50%;" to the elements.
Here is an example: http://codepen.io/markhkr/pen/XdxbrP
<TD ALIGN="center" style="width:50%;"><p id="t_4">Curent Number of Cars is <p id="t_red">6</p></p></TD>
<TD ALIGN="center" style="width:50%;"><p id="t_4">Curent Number of Family Members is <p id="t_red">2</p></p></TD>
You can add a columns attribute to the table to specify the widths at 50% each line so:
<table columns="50%,50%">
But be aware that using tables for this kind of layout is considered passée. Generally you would have each of the side-by-side elements as floating <div>s with a 50% width.
Give "cars" an id of left, and "family members" an id of right.
Set the with of each id to 50%, and use text-align: center.
I have to make a table using the table element in HTML. The table should look like this: required Table image
But at the moment my table looks like this: My Table image
I've tried to fix it numerous times. but I just can not figure it out.
heres my HTML code aswell.
Please help
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>Page header</title>
</head>
<body>
<table border="1" width="100%">
<tr>
<td colspan=4>Page Header </td>
</tr>
<tr>
<td rowspan=2>Menu: </td>
<td> Advertisement Space </td>
<td> Blog Links </td>
</tr>
<tr>
<td> Main Content Area</td>
</tr>
<tr>
<td colspan=4>Footer </td>
</tr>
</body>
</html>
The HTML below creats a table like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>Page header</title>
</head>
<body>
<table border="1" width="100%">
<tr>
<td colspan=4>Page Header </td>
</tr>
<tr>
<td rowspan=2>Menu: </td>
<td colspan=2> Advertisement Space </td>
</tr>
<tr>
<td> Main Content Area</td>
<td> Blog Links </td>
</tr>
<tr>
<td colspan=4>Footer </td>
</tr>
</body>
</html>
What you need to change:
Set colspan for the "Advertisment Space"
Move "Blog Links" to the same row as "Main Content Area"
Although I must say that tables are absolutely not state of the art when it comes to designing a website layout. <table> is used do display data (like a list or, well, a table).
<div> and <span> should be used to apply a layout to a website
Just correct with:
<td rowspan="2"> Blog Links </td>
Side comment: you seem to be building the layout of the page using html tables. Bad idea, read this.
Also, html attributes, to be correct, require quotes, i.e. <elem attrib="value">
Close off your table:
<table border="1" width>Table data...</table>
Give menu rowspan 4 and change accordingly.
I am integrating an e-mail and it is tearing my hair out! My e-mail has a centered layout (I am currently using Ink's hero template). The problem is that my layout is not centered in Outlook Web app because this client does not support margin (so I cannot center my layout with margin: 0 auto;).
Here is a sample of my code:
<!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"/>
<meta name="viewport" content="width=device-width"/>
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="header" valign="top" align="center">
<table class="container" width="580" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td class="wrapper last" valign="top" style="padding-top:10px;">
<img src="http://www.numeezy.com/img/numeezy-header.png" alt="Numeezy, l'hébergement professionel haute performance"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" align="center">
<table class="container" width="580" align="center">
</table>
</td>
</tr>
</table>
</body>
</html>
So, Outlook is not well rendering my e-mail because all my align="center" attributes are removed by Outlook.
<div style="width:100%;margin:0;padding:0;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;border-spacing:0;width:100%;text-align:justify;padding:0;">
<tbody>
<tr style="padding:0;">
<td valign="top" style="background-color:#17303E;padding:0;">
<span style="background-color:#17303E;">
<table width="580" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;border-spacing:0;width:580px;text-align:justify;margin-top:0;margin-bottom:0;padding:0;">
<tbody>
<tr style="padding:0;">
<td valign="top" style="padding:10px 0 0 0;">
<img blockedimagesrc="http://www.numeezy.com/img/numeezy-header.png" alt="Numeezy, l'hébergement professionel haute performance">
</td>
</tr>
</tbody>
</table>
</span>
</td>
</tr>
<tr style="padding:0;">
<td valign="top" style="padding:0;">
<table width="580" style="border-collapse:collapse;border-spacing:0;width:580px;text-align:justify;margin-top:0;margin-bottom:0;padding:0;">
</table>
</td>
</tr>
</tbody>
</table>
</div>
My table which have a width of 580px should be centered vertically. I can "emulate" it in the developer tool by removing the margin: 0; style and adding an align="center" attribute. It may be a lead!
Thank you in advance for your help!
EDIT: Edited my code with the last version
Try putting align="center" on the child element (the table you are trying to align). Outlook can work slightly differently with align to other clients. It treats it like float on the element itself, while others treat it like text:align; on the parent.
Update:
You have a lot of unnecessary stuff in there. Here is a clean example:
<style>
table td {border-collapse: collapse;}
</style>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" align="center" bgcolor="#17303E">
<table width="580" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#330000"><!-- colored so you can see it-->
<tr>
<td valign="top" style="padding-top:10px;"><!-- left aligned within centered panel -->
<img blockedimagesrc="..." alt="...">
</td>
</tr>
<tr>
<td valign="top" align="center" style="padding-top:10px;"><!-- center aligned within centered panel -->
<img blockedimagesrc="..." alt="...">
</td>
</tr>
</table>
</td>
</tr>
</table>
Here is an example basic setup to start your email with. It includes all the must have email normalization and a centered panel + independent forwarding background color.
<element align='center'> has also caused me trouble in the past. The way around it would be to use position: absolute; top: 50%; bottom: 50%; or something like that, in which case you would need to set your table a height/width in percentage.
You could even use margins like you mentioned: margin-top: 50%; margin-bottom: 50%.
Hope I could help.
The problem that I am having is while designing an email to be sent to users the border of the HTML table is not disappearing even though it is set to 0 and so leaves horrible white lines through areas which are menu to be solid blue colors, below is my HTML code!
<!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>
</head>
<body>
<table width="889" border="0" >
<tr>
<td>
<table width="882" border="0" bordercolor="#0099FF">
<tr>
<td colspan="4" bgcolor="#0099FF"> </td>
</tr>
<tr bgcolor="#0099FF">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td bgcolor="#0099FF"> </td>
<td colspan="2" rowspan="2">content</td>
<td bgcolor="#0099FF"> </td>
</tr>
<tr bgcolor="#CCCCCC">
<td> </td>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Add cellspacing="0" to your second table:
<table width="882" border="0" bordercolor="#0099FF" cellspacing="0">
Probably cellspacing="0" fixes these lines?