I am trying to send an email using my python code. which generates the following html and send using python.
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>HTML Table</h2>
<table>
<tr><td>a</td><td>b</td><td>c</td></tr>
<tr><td>x</td><td>y</td><td>z</td></tr>
<tr><td>p</td><td>q</td><td>r</td></tr>
</table>
</body>
</html>
This shows really nice table in browser.. However in outlook I don't see style sheet applied for table.
Related
I created a Prediction table for my website but I want an automatic updated for my table from livescore. Please can anyone help me with the right code
This is the html table
<!DOCTYPE html>
<html lang="en">
<body>
<table>
<tr>
<th colspan="2"><b>England » Premier</b></th>
<th><b>Prediction</b></th>
</tr>
<tr>
<td> 24-06:20:16</td>
<td>Red Bull Bragantino <b style="color:red"> 2 : 1 </b> Ponte Preta</td>
<td <td style="background-color:none;color:none;"><b>Home Win</b></td>
</tr>
</table>
</body>
</html>
This is the css code
table,
th,
td {
border: 0px solid black;
border-collapse: collapse;
}
table {
width: px;
}
th {
color: white;
background-color: black;
}
th,
td {
font-size: 25pt;
font-family: Arial;
text-align: center;
}
td {
background-color
Here's my HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Credit Balance</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1 id="idInput">Account </h1>
<table>
<thead>
<tr>
<th>Balance</th>
<th>Charges/Credits</th>
</tr>
</thead>
<tbody>
<tr>
<td id="balance">filler</td>
<td id="chargeCredit"> filler</td>
</tr>
</tbody>
</table>
<script src="accountprompt.js"></script>
<script src="index.js"></script>
</body>
</html>
and here's the CSS
h1 {
font-family: Arial, Helvetica, sans-serif;
text-decoration: underline;
font-weight: 500;
}
table,
th,
td {
border: 1px solid black;
}
table {
border-collapse: collapse;
}
th,
td {
padding: 15px;
text-align: left;
font-weight: lighter;
font-family: Arial, Helvetica, sans-serif;
}
I've tried deleting my CSS or JS, but I can't get the borders to return... when I went to bed last night I swear it was working fine, but I must have edited something and gone to bed!
When I went to https://jsfiddle.net/6a0opv7d/ and put your code, I saw the borders. Maybe you need to clear your cache and reload. That can be done by doing Shift + F5 on Windows. Or make sure that your CSS is linked properly, although all the other CSS is working.
table, th, td {
border: 1px solid black;
}
The following code works well if you want to have the same alternate row shading for all tables on the page:
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
tr:nth-child(even) {background-color: #f2f2f2;}
</style>
But I only want one of my tables to have this alternate shading. I thought I could just replace the name "table" with ".floatedTable" to apply the shading to the tables with class='floatedTable' but it doesn't do anything.
The way I'd prefer to do it is just find something to write inside of
If you want the style to apply only to a certain table by class, you should nest the TH in that class definition:
<style>
.floatedTable{
border-collapse: collapse;
width: 100%;
}
.floatedTable th, .floatedTable td {
text-align: left;
padding: 8px;
}
.floatedTable tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
When you start learning SCSS, you'll do it like this:
.floatedTable {
border-collapse: collapse;
width: 100%;
th, td {
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
}
Phiter beat me to it, but here's a working example: https://jsfiddle.net/targumon/y8z6hgxn/2/
.floatedTable tr:nth-child(even) {
background-color: #d08080;
}
For row shading, you can use the bootstrap class "table-striped" in the HTML.
The class will only be active on the table element it is contained in.
<table class="table table-striped">
<tr>
<th>Meals</th>
<th>Prices</th>
<th>Drinks</th>
<th>Prices</th>
</tr>
<tr>
<td>Macaroni and Cheese</td>
<td>£3.59</td>
<td>Coca Cola</td>
<td>£1.15</td>
</tr>
</table>
Hy, i have a little problem, i've set
border: none;
border-width: 0px;
border-spacing: 0px;
border-collapse: collapse;
padding: 0px;
margin: 0px;
for table, td and tr, but the 1px border still exists between tr nodes.
Html code:
<table>
<tr>
<td>
<a href='url'> some text </a>
</td>
<td>
<a href='url'> some text </a>
</td>
</tr>
</table>
for i've set
display: block;
color: white;
font-size: 13px;
text-decoration: none;
height: 24px;
padding: 9px 19px 1px;
font-weight: 600;
text-align: center;
changing padding to 0, don't give any results.
Any solutions?
Browser: last chrome, firefox.
OS MAC OS 10.8
You need to put border-collapse: collapse; in the table styling and border-spacing: 0px; padding: 0px; in the cell. See example code below.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
table {border-collapse: collapse;}
table tr {}
table td {border-spacing: 0px; padding: 0px;}
</style>
</head>
<body>
<table>
<tr>
<td>
<a href='url'> some text </a>
</td>
<td>
<a href='url'> some text </a>
</td>
</tr>
</table>
</body>
</html>
Try using:
border-style: none;
Note that this doesn't work in some versions of IE. IE9 is fine but in previous versions it displays the border even when the style is "none"
border: 0;
seems to work in all browsers...
i think your code was right?
Is this what you wanna see?
setting
border-collapse:collapse;
border:none;
is enough..
I have a HTML table where I must set the overall width and want to make sure the label column doesn't get too wide.
It works as expected in Firefox 4, but IE 9 seems to completely ignore the with property.
<html>
<head>
<style type="text/css">
table,th,td { border: solid 1px; border-collapse: collapse; }
th.caption { width: 700px; }
.label { width: 100px; }
</style>
</head>
<body>
<table>
<tr><th class="caption" colspan=2>Caption</th></tr>
<tr><td class="label">Label</td><td>Stuff...</td></tr>
<tr><td class="label">Label</td><td>Stuff...</td></tr>
</table>
</body>
</html>
Add <!DOCTYPE html> as the very first line to get Standards Mode (not directly related to your problem, but you should definitely do it unless you like IE9 pretending to be IE5 - Quirks Mode).
Set the overall width of the table on table instead of th.caption.
See: http://jsbin.com/icafo3
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
table,th,td { border: solid 1px; border-collapse: collapse; }
table { width: 700px; }
.label { width: 100px; }
</style>
</head>
<body>
<table>
<tr><th class="caption" colspan=2>Caption</th></tr>
<tr><td class="label">Label</td><td>Stuff...</td></tr>
<tr><td class="label">Label</td><td>Stuff...</td></tr>
</table>
</body>
</html>