trying to change the style of a number inside a cell without also changing the style of the cell itself.
i'm learning web developing and someone suggested creating a game would be a good idea. I'm trying to create a Sudoku game, with the regular style and set up. it's looking the way i want it to except for i can't change the color of the numbers inside the cells without also changing the color of the cell itself. I have the styling in a separate css file and tried making changes to it and also adding to the html file but i can't get it to work. Any suggestions will be appreciated.
here's the html
<html>
<head>
<link rel="stylesheet" href="assignment 1.css">
<title>sudoku</title>
</head>
<table>
<colgroup><col><col><col>
<colgroup><col><col><col>
<colgroup><col><col><col>
<tbody>
<tr> <td>1 <td> <td>3 <td>6 <td> <td>4 <td>7 <td> <td>9
<tr> <td> <td>2 <td> <td> <td>9 <td> <td> <td>1 <td>
<tr> <td>7 <td> <td> <td> <td> <td> <td> <td> <td>6
<tbody>
<tr> <td>2 <td> <td>4 <td> <td>3 <td> <td>9 <td> <td>8
<tr> <td> <td> <td> <td> <td> <td> <td> <td> <td>
<tr> <td>5 <td> <td> <td>9 <td> <td>7 <td> <td> <td>1
<tbody>
<tr> <td>6 <td> <td> <td> <td>5 <td> <td> <td> <td>2
<tr> <td> <td> <td> <td> <td>7 <td> <td> <td> <td>
<tr> <td>9 <td> <td> <td>8 <td> <td>2 <td> <td> <td>5
and the css
table { border-collapse: collapse; font-family: Palatino linotype, sans-
serif; }
colgroup, tbody { border: solid medium;}
td { border: solid thin; height: 1.4em; width: 1.4em; text-align: center;
padding: 0; }
https://en.wikipedia.org/wiki/Sudoku#/media/File:Sudoku_Puzzle_by_L2G-20050714_solution_standardized_layout.svg
i want the look to be similar to this, where the constant numbers are a different color.
You need to close the tbody, tr and td tags. To learn more about tables : https://www.w3schools.com/html/html_tables.asp
I have tried two options.
Red color text covered with th instead of td
Blue color td has a class and styled according to it.
<!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>
table {
font-size: 50px;
background: #000;
}
table table {
background: #fff;
}
table table td, table table th {
border: 1px solid #000;
}
table table th {
color: red;
}
table table td.blue{color:blue;}
</style>
</head>
<body>
<table width="600" border="0" align="center" cellpadding="0" cellspacing="5">
<tr>
<td width="200"><table width="100%" height="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<th align="center" valign="middle">1</th>
<td align="center" valign="middle">2</td>
<td align="center" valign="middle" class="blue">3</td>
</tr>
<tr>
<td align="center" valign="middle">4</td>
<th align="center" valign="middle" class="blue">5</th>
<td align="center" valign="middle">6</td>
</tr>
<tr>
<td align="center" valign="middle">7</td>
<th align="center" valign="middle">8</th>
<th align="center" valign="middle">9</th>
</tr>
</table></td>
<td width="200"><table width="100%" height="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<th align="center" valign="middle">1</th>
<td align="center" valign="middle">2</td>
<td align="center" valign="middle">3</td>
</tr>
<tr>
<td align="center" valign="middle">4</td>
<th align="center" valign="middle">5</th>
<td align="center" valign="middle">6</td>
</tr>
<tr>
<td align="center" valign="middle">7</td>
<th align="center" valign="middle">8</th>
<th align="center" valign="middle">9</th>
</tr>
</table></td>
<td width="200"><table width="100%" height="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<th align="center" valign="middle">1</th>
<td align="center" valign="middle">2</td>
<td align="center" valign="middle">3</td>
</tr>
<tr>
<td align="center" valign="middle">4</td>
<th align="center" valign="middle">5</th>
<td align="center" valign="middle">6</td>
</tr>
<tr>
<td align="center" valign="middle">7</td>
<th align="center" valign="middle">8</th>
<th align="center" valign="middle">9</th>
</tr>
</table></td>
</tr>
<tr>
<td><table width="100%" height="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<th align="center" valign="middle">1</th>
<td align="center" valign="middle">2</td>
<td align="center" valign="middle">3</td>
</tr>
<tr>
<td align="center" valign="middle">4</td>
<th align="center" valign="middle">5</th>
<td align="center" valign="middle">6</td>
</tr>
<tr>
<td align="center" valign="middle">7</td>
<th align="center" valign="middle">8</th>
<th align="center" valign="middle">9</th>
</tr>
</table></td>
<td><table width="100%" height="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<th align="center" valign="middle">1</th>
<td align="center" valign="middle">2</td>
<td align="center" valign="middle">3</td>
</tr>
<tr>
<td align="center" valign="middle">4</td>
<th align="center" valign="middle">5</th>
<td align="center" valign="middle">6</td>
</tr>
<tr>
<td align="center" valign="middle">7</td>
<th align="center" valign="middle">8</th>
<th align="center" valign="middle">9</th>
</tr>
</table></td>
<td><table width="100%" height="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<th align="center" valign="middle">1</th>
<td align="center" valign="middle" class="blue">2</td>
<td align="center" valign="middle">3</td>
</tr>
<tr>
<td align="center" valign="middle">4</td>
<th align="center" valign="middle">5</th>
<td align="center" valign="middle">6</td>
</tr>
<tr>
<td align="center" valign="middle">7</td>
<th align="center" valign="middle">8</th>
<th align="center" valign="middle">9</th>
</tr>
</table></td>
</tr>
<tr>
<td><table width="100%" height="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<th align="center" valign="middle">1</th>
<td align="center" valign="middle">2</td>
<td align="center" valign="middle">3</td>
</tr>
<tr>
<td align="center" valign="middle">4</td>
<th align="center" valign="middle">5</th>
<td align="center" valign="middle">6</td>
</tr>
<tr>
<td align="center" valign="middle">7</td>
<th align="center" valign="middle">8</th>
<th align="center" valign="middle">9</th>
</tr>
</table></td>
<td><table width="100%" height="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<th align="center" valign="middle">1</th>
<td align="center" valign="middle" class="blue">2</td>
<td align="center" valign="middle" class="blue">3</td>
</tr>
<tr>
<td align="center" valign="middle" class="blue">4</td>
<th align="center" valign="middle">5</th>
<td align="center" valign="middle" class="blue">6</td>
</tr>
<tr>
<td align="center" valign="middle">7</td>
<th align="center" valign="middle">8</th>
<th align="center" valign="middle">9</th>
</tr>
</table></td>
<td><table width="100%" height="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<th align="center" valign="middle">1</th>
<td align="center" valign="middle">2</td>
<td align="center" valign="middle">3</td>
</tr>
<tr>
<td align="center" valign="middle">4</td>
<th align="center" valign="middle">5</th>
<td align="center" valign="middle">6</td>
</tr>
<tr>
<td align="center" valign="middle">7</td>
<th align="center" valign="middle">8</th>
<th align="center" valign="middle">9</th>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
Related
I have a table with, let's say, 20 rows. I know I can use the nth-child css to change the background of the rows, but I don't know how to change the background for a repeating range of rows. For example, I want row 1-3 green, 4-6 white, 7-9 green,etc..
I tried chaining the nth-child, but I can't come up with the correct results.
This resembles the table I have:
<table border=1>
<tr>
<td width='30px' rowspan='3'>1</td>
<td width='150px'>1</td>
<td width='150px'>1</td>
</tr>
<tr>
<td width='150px'>2</td>
<td width='150px'>2</td>
</tr>
<tr class='trContacts'>
<td colspan='3'>3</td>
</tr>
<tr>
<td width='30px' rowspan='3'>4</td>
<td width='150px'>4</td>
<td width='150px'>4</td>
</tr>
<tr>
<td width='150px'>5</td>
<td width='150px'>5</td>
</tr>
<tr class='trContacts'>
<td colspan='3'>6</td>
</tr>
<tr>
<td width='30px' rowspan='3'>7</td>
<td width='150px'>7</td>
<td width='150px'>7</td>
</tr>
<tr>
<td width='150px'>8</td>
<td width='150px'>8</td>
</tr>
<tr class='trContacts'>
<td colspan='3'>9</td>
</tr>
<tr>
<td width='30px' rowspan='3'>10</td>
<td width='150px'>10</td>
<td width='150px'>10</td>
</tr>
<tr>
<td width='150px'>11</td>
<td width='150px'>11</td>
</tr>
<tr class='trContacts'>
<td colspan='3'>12</td>
</tr>
any help is greatly appreciated!!!
You can use formulas in nth-child:
tr:nth-child(6n+1), tr:nth-child(6n+2), tr:nth-child(6n+3) {
background-color: green;
}
This will select every 6th child and the two subsequent ones (means: always the first three out of six).
Tailored to your example:
tr:nth-child(6n+1), tr:nth-child(6n+2), tr:nth-child(6n+3) {
background-color: green;
}
<table border=1>
<tr>
<td width='30px' rowspan='3'>1</td>
<td width='150px'>1</td>
<td width='150px'>1</td>
</tr>
<tr>
<td width='150px'>2</td>
<td width='150px'>2</td>
</tr>
<tr class='trContacts'>
<td colspan='3'>3</td>
</tr>
<tr>
<td width='30px' rowspan='3'>4</td>
<td width='150px'>4</td>
<td width='150px'>4</td>
</tr>
<tr>
<td width='150px'>5</td>
<td width='150px'>5</td>
</tr>
<tr class='trContacts'>
<td colspan='3'>6</td>
</tr>
<tr>
<td width='30px' rowspan='3'>7</td>
<td width='150px'>7</td>
<td width='150px'>7</td>
</tr>
<tr>
<td width='150px'>8</td>
<td width='150px'>8</td>
</tr>
<tr class='trContacts'>
<td colspan='3'>9</td>
</tr>
<tr>
<td width='30px' rowspan='3'>10</td>
<td width='150px'>10</td>
<td width='150px'>10</td>
</tr>
<tr>
<td width='150px'>11</td>
<td width='150px'>11</td>
</tr>
<tr class='trContacts'>
<td colspan='3'>12</td>
</tr>
</table>
tr {
background-color: red;
}
tr:nth-child(n+4) {
background-color: green;
}
tr:nth-child(n+7) {
background-color: blue;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<table border=1>
<tr>
<td width='30px' rowspan='3'>1</td>
<td width='150px'>1</td>
<td width='150px'>1</td>
</tr>
<tr>
<td width='150px'>2</td>
<td width='150px'>2</td>
</tr>
<tr class='trContacts'>
<td colspan='3'>3</td>
</tr>
<tr>
<td width='30px' rowspan='3'>4</td>
<td width='150px'>4</td>
<td width='150px'>4</td>
</tr>
<tr>
<td width='150px'>5</td>
<td width='150px'>5</td>
</tr>
<tr class='trContacts'>
<td colspan='3'>6</td>
</tr>
<tr>
<td width='30px' rowspan='3'>7</td>
<td width='150px'>7</td>
<td width='150px'>7</td>
</tr>
<tr>
<td width='150px'>8</td>
<td width='150px'>8</td>
</tr>
<tr class='trContacts'>
<td colspan='3'>9</td>
</tr>
<tr>
</body>
</html>
Try this
.table tr:nth-child(3n + 1) td:nth-child(odd) {
background: blue;
}
.table tr:nth-child(3n + 1) td:nth-child(even) {
background: green;
}
.table tr:nth-child(3n + 1) td:first-child {
background: red;
}
.table tr:nth-child(3n + 1) + tr td:nth-child(odd) {
background: orange;
}
.table tr:nth-child(3n + 1) + tr td:nth-child(even) {
background: black;
}
.table tr:nth-child(3n + 1) + tr + tr td {
background: yellow;
}
<table border=1 class="table">
<tr>
<td width='30px' rowspan='3'>1</td>
<td width='150px'>1</td>
<td width='150px'>1</td>
</tr>
<tr>
<td width='150px'>2</td>
<td width='150px'>2</td>
</tr>
<tr class='trContacts'>
<td colspan='3'>3</td>
</tr>
<tr>
<td width='30px' rowspan='3'>4</td>
<td width='150px'>4</td>
<td width='150px'>4</td>
</tr>
<tr>
<td width='150px'>5</td>
<td width='150px'>5</td>
</tr>
<tr class='trContacts'>
<td colspan='3'>6</td>
</tr>
<tr>
<td width='30px' rowspan='3'>7</td>
<td width='150px'>7</td>
<td width='150px'>7</td>
</tr>
<tr>
<td width='150px'>8</td>
<td width='150px'>8</td>
</tr>
<tr class='trContacts'>
<td colspan='3'>9</td>
</tr>
<tr>
<td width='30px' rowspan='3'>10</td>
<td width='150px'>10</td>
<td width='150px'>10</td>
</tr>
<tr>
<td width='150px'>11</td>
<td width='150px'>11</td>
</tr>
<tr class='trContacts'>
<td colspan='3'>12</td>
</tr>
<tr>
<td width='30px' rowspan='3'>1</td>
<td width='150px'>1</td>
<td width='150px'>1</td>
</tr>
<tr>
<td width='150px'>2</td>
<td width='150px'>2</td>
</tr>
<tr class='trContacts'>
<td colspan='3'>3</td>
</tr>
<tr>
<td width='30px' rowspan='3'>4</td>
<td width='150px'>4</td>
<td width='150px'>4</td>
</tr>
<tr>
<td width='150px'>5</td>
<td width='150px'>5</td>
</tr>
<tr class='trContacts'>
<td colspan='3'>6</td>
</tr>
<tr>
<td width='30px' rowspan='3'>7</td>
<td width='150px'>7</td>
<td width='150px'>7</td>
</tr>
<tr>
<td width='150px'>8</td>
<td width='150px'>8</td>
</tr>
<tr class='trContacts'>
<td colspan='3'>9</td>
</tr>
<tr>
<td width='30px' rowspan='3'>10</td>
<td width='150px'>10</td>
<td width='150px'>10</td>
</tr>
<tr>
<td width='150px'>11</td>
<td width='150px'>11</td>
</tr>
<tr class='trContacts'>
<td colspan='3'>12</td>
</tr>
</table>
Appears in firefox only. Just add linebreak at the beginning of 1 cell to see what happens, or see screenshot.
What I want:
1. Column width must stay constant
2. Table must grow only in height
<style>
td {
white-space: pre-wrap;
word-break: break-all;
width: 200px;
}
</style>
<table border="1">
<caption>Таблица размеров обуви</caption>
<tr>
<th>Россия</th>
<th>Великобритания</th>
<th>Европа</th>
<th>Длина ступни, см</th>
</tr>
<tr>
<td contenteditable="true">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
<td contenteditable="true">3,5</td>
<td contenteditable="true">36</td>
<td contenteditable="true">23</td>
</tr>
<tr>
<td contenteditable="true">35,5</td>
<td contenteditable="true">4</td>
<td contenteditable="true">36⅔</td>
<td contenteditable="true">23–23,5</td>
</tr>
<tr>
<td contenteditable="true">36</td>
<td contenteditable="true">4,5</td>
<td contenteditable="true">37⅓</td>
<td contenteditable="true">23,5</td>
</tr>
<tr>
<td contenteditable="true">36,5</td>
<td contenteditable="true">5</td>
<td contenteditable="true">38</td>
<td contenteditable="true">24</td>
</tr>
<tr>
<td contenteditable="true">37</td>
<td contenteditable="true">5,5</td>
<td contenteditable="true">38⅔</td>
<td contenteditable="true">24,5</td>
</tr>
<tr>
<td contenteditable="true">38</td>
<td contenteditable="true">6</td>
<td contenteditable="true">39⅓</td>
<td contenteditable="true">25</td>
</tr>
<tr>
<td contenteditable="true">38,5</td>
<td contenteditable="true">6,5</td>
<td contenteditable="true">40</td>
<td contenteditable="true">25,5</td>
</tr>
<tr>
<td contenteditable="true">39</td>
<td contenteditable="true">7</td>
<td contenteditable="true">40⅔</td>
<td contenteditable="true">25,5–26</td>
</tr>
<tr>
<td contenteditable="true">40</td>
<td contenteditable="true">7,5</td>
<td contenteditable="true">41⅓</td>
<td contenteditable="true">26</td>
</tr>
<tr>
<td contenteditable="true">40,5</td>
<td contenteditable="true">8</td>
<td contenteditable="true">42</td>
<td contenteditable="true">26,5</td>
</tr>
<tr>
<td contenteditable="true">41</td>
<td contenteditable="true">8,5</td>
<td contenteditable="true">42⅔</td>
<td contenteditable="true">27</td>
</tr>
<tr>
<td contenteditable="true">42</td>
<td contenteditable="true">9</td>
<td contenteditable="true">43⅓</td>
<td contenteditable="true">27,5</td>
</tr>
<tr>
<td contenteditable="true">43</td>
<td contenteditable="true">9,5</td>
<td contenteditable="true">44</td>
<td contenteditable="true">28</td>
</tr>
<tr>
<td contenteditable="true">43,5</td>
<td contenteditable="true">10</td>
<td contenteditable="true">44⅔</td>
<td contenteditable="true">28–28,5</td>
</tr>
<tr>
<td contenteditable="true">44</td>
<td contenteditable="true">10,5</td>
<td contenteditable="true">45⅓</td>
<td contenteditable="true">28,5–29</td>
</tr>
<tr>
<td contenteditable="true">44,5</td>
<td contenteditable="true">11</td>
<td contenteditable="true">46</td>
<td contenteditable="true">29</td>
</tr>
<tr>
<td contenteditable="true">45</td>
<td contenteditable="true">11,5</td>
<td contenteditable="true">46⅔</td>
<td contenteditable="true">29,5</td>
</tr>
<tr>
<td contenteditable="true">46</td>
<td contenteditable="true">12</td>
<td contenteditable="true">47⅓</td>
<td contenteditable="true">30</td>
</tr>
<tr>
<td contenteditable="true">46,5</td>
<td contenteditable="true">12,5</td>
<td contenteditable="true">48</td>
<td contenteditable="true">30,5</td>
</tr>
<tr>
<td contenteditable="true">47</td>
<td contenteditable="true">13</td>
<td contenteditable="true">48⅔</td>
<td contenteditable="true">31</td>
</tr>
<tr>
<td contenteditable="true">48</td>
<td contenteditable="true">13,5</td>
<td contenteditable="true">49⅓</td>
<td contenteditable="true">31,5</td>
</tr>
</table>
</body>
</html>
https://jsfiddle.net/s8q0evkf/
Use max-width to set a maximum width
td {
white-space: pre-wrap;
word-break: break-all;
width: 200px;
max-width: 200px;
}
The overflowing content will now overflow in height instead of the width.
Documentation: http://www.w3schools.com/cssref/pr_dim_max-width.asp
I am putting together a html based e-mail for distribution to our subscribers. However, when I render it in various clients, it is coming out slightly differently. The major difference that I see is that in some clients the main picture is offset to the left, and the grid boxes may have a different height depending on the number of lines contained. My aim was to reserve enough space for multiple lines so that all boxes would be the same height. Can anyone help me to locate the problem areas? The client in the picture with the problems is Outlook 2003, and the correct one is gmail in Chrome.
Because the html is too long to fit in stackoverflow, I'm including extracts that produce the main item with the offset picture, and the various sized grid box.
Strange offset:
<tr>
<td height="15" style="text-align:center" width="100%"></td></tr><tr>
<td border="0" width="600" style="text-align:center" align="center">
<img alt="" border="0" width="600" height="400" align="top" src="https://ci5.googleusercontent.com/proxy/vTfZfEiq_KN8RAd8D80hICfjyqCddT8oyJJNwnuvZ8D7jg4mbFEbJab51vi_ZiMrHNRitMhAtMu_hSU9Eiy1iNjIEz8YmmlkCx6M6C1lQmBkC6jm7ye1uSoKDMmq8XVo-qD0ZXA=s0-d-e1-ft#https://img.grouponcdn.com/deal/3YewhZBYt2iywAzJsuHy/ZP-960x582/v1/t440x300.jpg" style="width:600px;min-height:400px">
</td>
</tr>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr><td>
<table width="100%" border="0" cellpadding="10" cellspacing="0">
<tbody>
<tr>
<td border="0" bgcolor="#403e3e" style="background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:16px;font-weight:normal;color:#ffffff;line-height:18px;text-align:left">
<img height="23" style="min-height:23px" src="https://ci3.googleusercontent.com/proxy/FYU-iKV58t7t1Y09W8HkB8ZvJUWC53Zs279rZhUHmFlI6GwdK9THzm1007Ty7LgiJAlwsOhpGzsZL7-IU-1WHk5fdBo80RCk0b8_Xc_LfDNnqw=s0-d-e1-ft#http://www.example.com/images/logos/partners/small/groupon.png" alt="Gourmet All-Inclusive 4.5-Star Playa del Carmen Resort">
</td>
<td border="0" bgcolor="#403e3e" style="background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:16px;font-weight:normal;color:#ffffff;line-height:18px;text-align:right">
<span>$1179</span>
</td>
</tr>
<tr>
<td border="0" height="30" colspan="2" valign="top" bgcolor="#403e3e" style="vertical-align:top;height:30px;background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:16px;font-weight:normal;color:#ffffff;line-height:18px;text-align:left">
Gourmet All-Inclusive 4.5-Star Playa del Carmen Resort
</td>
</tr>
<tr>
<td border="0" height="30" colspan="2" valign="top" bgcolor="#403e3e" style="vertical-align:top;height:30px;background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:16px;font-weight:normal;color:#ffffff;line-height:18px;text-align:left">
Branchville, NJ, USA
</td>
</tr>
</tbody>
</table>
</td>
</tr></tbody>
</table>
</td>
</tr>
Various sized boxes:
<tr>
<td align="center" valign="top">
<table align="center" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td>
<table align="left" border="0" cellpadding="0" cellspacing="0" style=
"background-color:#403e3e" width="290">
<tbody>
<tr>
<td border="0" width="290"><a href=
"#147d3134c7aae5a7_147d3131083faac4_" style="border:none"><img alt=
"" border="0" height="180" src=
"https://ci4.googleusercontent.com/proxy/2iCMcbaq9UymG0sHx0JXF9wuBHu-8ibBC66U7s1q7i7Lo5zNS83olrIm7NNBuhybni869s64dxK1_5u13bYUudnGh3fh680G2yLGIc9rQ_YFWe2YLdExA4UUO5A2j_7rJlhLmXQ=s0-d-e1-ft#https://img.grouponcdn.com/deal/rHsqnohK7vGd79o7hGUq/VQ-960x582/v1/t440x300.jpg"
style="width:290px;min-height:180px;display:block" width=
"290" /></a></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="7" cellspacing="0" width="100%">
<tbody>
<tr>
<td border="0" bgcolor="#403E3E" style=
"background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;color:#ffffff;line-height:18px;text-align:left">
<img height="15" src=
"https://ci3.googleusercontent.com/proxy/FYU-iKV58t7t1Y09W8HkB8ZvJUWC53Zs279rZhUHmFlI6GwdK9THzm1007Ty7LgiJAlwsOhpGzsZL7-IU-1WHk5fdBo80RCk0b8_Xc_LfDNnqw=s0-d-e1-ft#http://www.example.com/images/logos/partners/small/groupon.png"
style="min-height:15px" alt="Groupon" /></td>
<td border="0" bgcolor="#403E3E" style=
"background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;color:#ffffff;line-height:15px;text-align:right">
<span>$285</span></td>
</tr>
<tr>
<td border="0" height="30" valign="top" bgcolor="#403E3E"
colspan="2" style=
"overflow:hidden;vertical-align:top;height:30px;background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;color:#ffffff;line-height:15px;text-align:left">
<a href="http://-featured_url-" style=
"text-decoration:none;color:#ffffff;font-size:13px" target=
"_blank">Luxury Villas & Gourmet Meals in Puerto
Vallarta</a></td>
</tr>
<tr>
<td border="0" height="30" valign="top" bgcolor="#403E3E"
colspan="2" style=
"vertical-align:top;height:30px;background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;color:#ffffff;line-height:15px;text-align:left">
Puerto Vallarta, Mexico</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td border="0" bgcolor="#FFFFFF" height="15" width="100%">
</td>
</tr>
</tbody>
</table>
<table align="right" border="0" cellpadding="0" cellspacing="0" style=
"background-color:#403e3e" width="290">
<tbody>
<tr>
<td border="0" width="290"><a href=
"#147d3134c7aae5a7_147d3131083faac4_" style="border:none"><img alt=
"" border="0" height="180" src=
"https://ci6.googleusercontent.com/proxy/rhQa6yfks-smgpfVft9mFyFjy-buDbxqyC7skH8tBNv-KfX5FspdLl6GpcdipcquRGoQreMi29C5cmhGaXFp8c6kF4P84Duam0ZfHGGqQZUudPbo5dXvcAOmj2qFfCfTB3KnZEg=s0-d-e1-ft#https://img.grouponcdn.com/deal/deYNpeAfGJxahmvmev46/SV-960x582/v1/t440x300.jpg"
style="width:290px;min-height:180px;display:block" width=
"290" /></a></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="7" cellspacing="0" width="100%">
<tbody>
<tr>
<td border="0" bgcolor="#403E3E" style=
"background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;color:#ffffff;line-height:18px;text-align:left">
<img height="15" src=
"https://ci3.googleusercontent.com/proxy/FYU-iKV58t7t1Y09W8HkB8ZvJUWC53Zs279rZhUHmFlI6GwdK9THzm1007Ty7LgiJAlwsOhpGzsZL7-IU-1WHk5fdBo80RCk0b8_Xc_LfDNnqw=s0-d-e1-ft#http://www.example.com/images/logos/partners/small/groupon.png"
style="min-height:15px" alt="Groupon" /></td>
<td border="0" bgcolor="#403E3E" style=
"background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;color:#ffffff;line-height:15px;text-align:right">
<span>$99</span></td>
</tr>
<tr>
<td border="0" height="30" valign="top" bgcolor="#403E3E"
colspan="2" style=
"overflow:hidden;vertical-align:top;height:30px;background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;color:#ffffff;line-height:15px;text-align:left">
<a href="http://-featured_url-" style=
"text-decoration:none;color:#ffffff;font-size:13px" target=
"_blank">Charming Northern Michigan Inn near Lakes</a></td>
</tr>
<tr>
<td border="0" height="30" valign="top" bgcolor="#403E3E"
colspan="2" style=
"vertical-align:top;height:30px;background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;color:#ffffff;line-height:15px;text-align:left">
Denton Township, MI, USA</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td border="0" bgcolor="#FFFFFF" height="15" width="100%">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
This is a picture of how it should look (gmail):
This is a picture of how it looks in outlook 2003:
Your question is a neverending story.... few suggestions.
reset as much default value, as possible
use tables, but reset cellpadding cellspacing and border values to 0
do not use colspan, rowspan, because a few clients do not support it, and rest of the clients may handle it differently
you need to double/triple declare the css values (always write css inline, and in head style)
no margins, only padding values, and only on TD elements
always give exact width and height for images, (and apply display:block to remove unwanted spaces below)
set font-size 0 on body, and after set font-size on every element where you need, to avoid invisible characters on inline elements.
Height values on TD sometimes works, sometimes not, thats why a lot of ppl use spacer images. I recommend an empty TD with padding-top:30px is much stable....
I'm a frontend developer #EDMdesigner.com
I want to create a gumby grid, but I need something similar with table using rowspan. Is it possible?
<table>
<tr>
<td rowspan="2" colspan="2" >
two rows two columns
</td>
<td>something</td>
<td>something</td>
<td>something</td>
</tr>
<tr>
<td>something</td>
<td>something</td>
<td>something</td>
</tr>
<tr>
<td rowspan="2" colspan="3" >
two rows three columns
</td>
<td>something</td>
<td>something</td>
</tr>
<tr>
<td>something</td>
<td>something</td>
</tr>
Thanks!
Can be fixed with nested tables
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<table width="200" align="center" cellpadding="0" cellspacing="0" bgcolor="ff0000">
<tr>
<td>
two rows two columns
</td>
</tr>
</table>
</td>
<td>
<table width="300" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>something</td>
<td>something</td>
<td>something</td>
</tr>
</table>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<table width="300" align="center" cellpadding="0" cellspacing="0" bgcolor="ff0000">
<tr>
<td>
two rows three columns
</td>
</tr>
</table>
</td>
<td>
<table width="200" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>something</td>
<td>something</td>
</tr>
<tr>
<td>something</td>
<td>something</td>
</tr>
</table>
</td>
</tr>
</table>
I have this code on my print.css:
#header, #tae, #nav, .noprint {display: none;}
width: 100%; margin: 0; float: none;
In order not to display the elements within those div tags. But I don't know with the code below why it isn't cooperating. If I place the div tags on it. And then I hit the print button. I see no output.
Here it is:
<div id="tae">
<table border="0" align="center" cellpadding="0" cellspacing="0" class="bg1">
<tr>
<td class="text1" style="height: 50px;">xd627 information management system</td>
</tr>
<tr>
<td class="bg5"><table border="0" cellspacing="0" cellpadding="0" style="height: 62px; padding-top: 15px;">
<tr align="center">
<td>Homepage</td>
<td>Database</td>
<td>About</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top" class="bg6"> </td>
</tr>
<tr>
<td><table width="780" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td width="20"> </td>
<td width="297"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/spacer.gif" alt="" width="30" height="30" /></td>
</tr>
</tr>
<tr>
<td class="text2">
</div>
<div id="max">
<?php
//some php code in here showing a mysql table.
?>
</div>
What's wrong with my code? Does the php script depend on the one where I put the div tag in?
What do I do? All I want to show up in my page when printed is the mysql table. I'm using
Universal Document Converter to simulate printing.
The HTML in that snippet is broken and the entire document is contained in #tae, thus nothing will print as everything is in a container that is display: none;
Here's a cleaned up version of that markup.
<div id="tae">
<table border="0" align="center" cellpadding="0" cellspacing="0" class="bg1">
<tr>
<td class="text1" style="height: 50px;">xd627 information management system</td>
</tr>
<tr>
<td class="bg5">
<table border="0" cellspacing="0" cellpadding="0" style="height: 62px; padding-top: 15px;">
<tr align="center">
<td>Homepage</td>
<td>Database</td>
<td>About</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" class="bg6"> </td>
</tr>
<tr>
<td>
<table width="780" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td width="20"> </td>
<td width="297">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<img src="images/spacer.gif" alt="" width="30" height="30" />
</td>
</tr>
<tr>
<td class="text2"></td>
</tr>
<!-- All this is missing, from here... -->
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!-- ...to here. -->
<div id="max">
<?php
//some php code in here showing a mysql table.
?>
</div>