I have this tiny web page:
This is the source code:
<head>
<meta charset="UTF-8">
<style>
body {
margin-left: 20px;
margin-top: 20px;
}
h1 {
font-family: Helvetica Neue, Helvetica;
font-weight: 500;
}
h2 {
font-family: Helvetica Neue, Helvetica;
font-weight: 500;
}
h3 {
font-family: Helvetica Neue, Helvetica;
font-weight: 500;
}
h4 {
font-family: Helvetica Neue, Helvetica;
font-weight: 500;
}
h5 {
font-family: Helvetica Neue, Helvetica;
font-weight: 500;
}
h6 {
font-family: Helvetica Neue, Helvetica;
font-weight: 500;
}
hr {
height: 3px;
border-radius: 2px;
border-width: 0;
color: lightgray;
background-color: lightgray;
}
.button {
display: inline-block;
background-color: darkgray;
color: white;
text-decoration: none;
border-radius: 2px;
padding: 6px;
margin-left: 2px;
margin-right: 2px;
}
.button:hover {
color: black;
}
.button:visited {
color: white;
}
.button:active {
color: white;
}
a {
color: gray;
}
</style>
</head>
<body nyxt-identifier="0">
<style nyxt-identifier="1">
body {
margin-left: 20px;
margin-top: 20px;
}
h1 {
font-family: Helvetica Neue, Helvetica;
font-weight: 500;
}
h2 {
font-family: Helvetica Neue, Helvetica;
font-weight: 500;
}
h3 {
font-family: Helvetica Neue, Helvetica;
font-weight: 500;
}
h4 {
font-family: Helvetica Neue, Helvetica;
font-weight: 500;
}
h5 {
font-family: Helvetica Neue, Helvetica;
font-weight: 500;
}
h6 {
font-family: Helvetica Neue, Helvetica;
font-weight: 500;
}
hr {
height: 3px;
border-radius: 2px;
border-width: 0;
color: lightgray;
background-color: lightgray;
}
.button {
display: inline-block;
background-color: darkgray;
color: white;
text-decoration: none;
border-radius: 2px;
padding: 6px;
margin-left: 2px;
margin-right: 2px;
}
.button:hover {
color: black;
}
.button:visited {
color: white;
}
.button:active {
color: white;
}
a {
color: gray;
}
</style>
<h1 nyxt-identifier="2">Bindings</h1>
<p nyxt-identifier="3">
</p>
<div nyxt-identifier="4">
<h3 nyxt-identifier="5">override-map</h3>
<table nyxt-identifier="6">
<tbody nyxt-identifier="7">
<tr nyxt-identifier="8">
<td nyxt-identifier="9">C-S
</td>
<td nyxt-identifier="10">search-buffers
</td>
</tr>
<tr nyxt-identifier="11">
</td>
</tr>
</tbody>
</table>
</div>
<div nyxt-identifier="44">
<h3 nyxt-identifier="45">web-cua-map</h3>
<table nyxt-identifier="46">
<tbody nyxt-identifier="47">
<tr nyxt-identifier="48">
<td nyxt-identifier="49">f3
</td>
<td nyxt-identifier="50">search-buffer
</td>
</tr>
<tr nyxt-identifier="51">
</td>
</tr>
</tbody>
</table>
</div>
<div nyxt-identifier="195">
<h3 nyxt-identifier="196">base-cua-map</h3>
<table nyxt-identifier="197">
<tbody nyxt-identifier="198">
<tr nyxt-identifier="199">
<td nyxt-identifier="200">f5
</td>
<td nyxt-identifier="201">reload-current-buffer
</td>
</tr>
<tr nyxt-identifier="202">
</td>
</tr>
</tbody>
</table>
</div>
</body>
The code and image above are a simplification of the real problem. In the real problem, the page is way bigger because the table has more elements than the currently shown.
I would like to use the space in a better way so that printing it would not spend too much paper. There is a lot of space being wasted on the right side of the screen.
The content could be more widespread horizontally instead of only vertically.
Two feasible approaches to achieve this goal would be (i) reducing the font-size, and (ii) making the table be a 2 column-table or 3-column instead of 1-column.
OK. I can reduce the font-size with CSS:
tr { font-size: 10px}
Thus, I would like to ask:
1 - How to make the table be 3-column or 2-column table using CSS?
I tried this approach following the example on W3C:
table {
column-span: all;
}
But it did not work out.
2 - Would you have any suggestions beyond the font and column number tweak to maximize the use of space and reduce the use of paper?
This is not complicated at all. You just have to put all the key bindings and headings in one table instead of each in it's own. Then, we use a little bit of CSS to get a small border line between the table cells - just remove the CSS part if you don't want a border. Like this:
table {
border-spacing: 0;
}
td {
border: 1px solid black;
padding: 10px;
}
<h1>Bindings</h1>
<table>
<tbody>
<tr>
<td colspan="2">
override-map
</td>
<td colspan="2">
web-cua-map
</td>
<td colspan="2">
base-cua-map
</td>
</tr>
<tr>
<td>
C-S
</td>
<td>
search-buffers
</td>
<td>
F3
</td>
<td>
search-buffer
</td>
<td>
F5
</td>
<td>
reload-current-buffer
</td>
</tr>
</tbody>
</table>
Related
I added bootstrap to my page to solve a different problem, then I noticed that my table cells in another place had all collapsed:
How do I get the cells to auto size to their contents? I've seen posts about changing the width of cells, but I need to change their height back to their pre-bootstrap settings.
Here is my code:
.countdown_table {
margin-left: auto;
margin-right: auto;
margin-top: 30px;
}
.countdown_table tr td {
font-family: 'proxima-nova', sans-serif;
padding-right: 20px;
color: white;
text-align: center;
}
.units {
font-weight: 100;
text-transform: uppercase;
text-align: center;
}
.numbers {
font-size: 700%;
font-weight: 100;
letter-spacing: 0;
text-align: center;
background: #e18b35 !important;
font-family: 'proxima-nova', sans-serif;
color: white;
}
#secondElem {
width: 97px !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<table class="countdown_table" border="1">
<tr>
<td class="numbers" id="dayElem">04</td>
<td class="numbers">:</td>
<td class="numbers" id="hourElem">02</td>
<td class="numbers">:</td>
<td class="numbers" id="minuteElem">47</td>
<td class="numbers">:</td>
<td class="numbers" id="secondElem">04</td>
</tr>
<tr class="units">
<td>days</td>
<td></td>
<td>hours</td>
<td></td>
<td>minutes</td>
<td></td>
<td>seconds</td>
</tr>
</table>
I'm building a really simple template for an HTML email and all is great until you get to Outlook... Outlook seems to ignore all styling with regards to the max-width of the table so it spans the whole width of the email window.
I've tried a couple of things like wrapping the table within a div with a max-width but it just get's ignored.
The code is below, can anyone spot what's causing the problem:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Oppss, Hello</title>
<style>
/* -------------------------------------
GLOBAL
------------------------------------- */
* {
font-family: Calibri, 'Open Sans', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-size: 100%;
line-height: 1.6em;
margin: 0;
padding: 0;
}
img {
max-width: 600px;
width: 100%;
}
body {
-webkit-font-smoothing: antialiased;
height: 100%;
-webkit-text-size-adjust: none;
width: 100% !important;
}
/* -------------------------------------
ELEMENTS
------------------------------------- */
a {
color: #348eda;
}
.btn-primary {
margin-bottom: 10px;
width: auto !important;
}
.btn-primary td {
background-color: #348eda;
border-radius: 25px;
font-family: Calibri, 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-size: 14px;
text-align: center;
vertical-align: top;
}
.btn-primary td a {
background-color: #348eda;
border: solid 1px #348eda;
border-radius: 25px;
border-width: 10px 20px;
display: inline-block;
color: #ffffff;
cursor: pointer;
font-weight: bold;
line-height: 2;
text-decoration: none;
}
.last {
margin-bottom: 0;
}
.first {
margin-top: 0;
}
.padding {
padding: 10px 0;
}
/* -------------------------------------
BODY
------------------------------------- */
table.body-wrap {
padding: 20px;
width: 100%;
}
table.body-wrap .container {
border: 1px solid #f0f0f0;
}
/* -------------------------------------
FOOTER
------------------------------------- */
table.footer-wrap {
clear: both !important;
width: 100%;
}
.footer-wrap .container p {
color: #666666;
font-size: 12px;
}
table.footer-wrap a {
color: #999999;
}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1,
h2,
h3 {
color: #e6007e;
font-family: Calibri, 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 200;
line-height: 1.2em;
margin: 10px 0 10px;
}
h1 {
font-size: 74px;
padding: 0px 20px 0px 20px;
letter-spacing: -5px;
}
h2 {
font-size: 28px;
}
h3 {
font-size: 22px;
}
h3 {
font-size: 22px;
font-style: italic;
}
h4 {
font-size: 15px;
line-height: 21px;
font-style: italic;
margin: 0 0 20px 0;
color: #53565a;
padding: 0 20px 0 40px;
font-weight: 600;
font-family: Georgia, "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
p,
ul,
ol {
font-size: 14px;
font-weight: normal;
margin-bottom: 10px;
color: #53565a;
padding: 0 20px 0 40px;
font-family: Calibri, 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
ul li,
ol li {
margin-left: 5px;
list-style-position: inside;
}
/* ---------------------------------------------------
RESPONSIVENESS
------------------------------------------------------ */
/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
.container {
clear: both !important;
display: block !important;
Margin: 0 auto !important;
max-width: 600px !important;
}
.rounded-wrapper {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
background-color: #fff;
}
/* Set the padding on the td rather than the div for Outlook compatibility */
.body-wrap .container {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
background-color: #fff;
}
/* This should also be a block element, so that it will fill 100% of the .container */
.content {
display: block;
margin: 0 auto;
max-width: 600px;
}
/* Let's make sure tables in the content area are 100% wide */
.content table {
width: 100%;
}
</style>
</head>
<body bgcolor="#f6f6f6">
<div style="width: 600px !important; margin: 0 auto;">
<!-- body -->
<table class="body-wrap" bgcolor="#f6f6f6" width="600" style="max-width: 600px !important; margin: 0 auto;">
<tr>
<td></td>
<td class="container" bgcolor="#FFFFFF" style="border: 20px solid #009fe3">
<div class="rounded-wrapper">
<!-- content -->
<div class="content">
<img src="header.jpg" editable="true" width="560">
<table>
<tr>
<td>
<h1><img src="hello.jpg" style="width: 204px;"></h1>
<h4>Lorem</h4>
<p>Lorem</p>
<p>Lorem</p>
<p>Lorem</p>
<p style="padding: 10px 20px 0 20px !important"><img src="apply-now.jpg" style="width: 121px;"></p>
</td>
</tr>
</table>
</div>
<!-- /content -->
</div>
</td>
<td></td>
</tr>
</table>
<!-- /body -->
<!-- footer -->
<table class="footer-wrap" width="600" style="max-width: 600px !important; margin: 0 auto;">
<tr>
<td></td>
<td class="container">
<!-- content -->
<div class="content">
<table>
<tr>
<td align="center">
<p><unsubscribe>Unsubscribe</unsubscribe>.
</p>
</td>
</tr>
</table>
</div>
<!-- /content -->
</td>
<td></td>
</tr>
</table>
<!-- /footer -->
</div>
</body>
</html>
Outlook ignores max-width, you should wrap the email <table> with if microsoft outlook tags (mso).
<!--[if mso]>
<center><table><tr><td width="600">
<![endif]-->
<!-- MAIN EMAIL BODY -->
<table class="body-wrap" bgcolor="#f6f6f6" width="600" style="max-width: 600px !important; margin: 0 auto;">
<tr>
<td></td>
<td class="container" bgcolor="#FFFFFF" style="border: 20px solid #009fe3">
<div class="rounded-wrapper">
<!-- content -->
<div class="content">
<img src="header.jpg" editable="true" width="560">
<table>
<tr>
<td>
<h1><img src="hello.jpg" style="width: 204px;"></h1>
<h4>Lorem</h4>
<p>Lorem</p>
<p>Lorem</p>
<p>Lorem</p>
<p style="padding: 10px 20px 0 20px !important">
<a href="#" target="_blank" editable="true">
<img src="apply-now.jpg" style="width: 121px;">
</a>
</p>
</td>
</tr>
</table>
</div>
<!-- /content -->
</div>
</td>
<td></td>
</tr>
</table>
<!-- /body -->
<!-- footer -->
<table class="footer-wrap" width="600" style="max-width: 600px !important; margin: 0 auto;">
<tr>
<td></td>
<td class="container">
<!-- content -->
<div class="content">
<table>
<tr>
<td align="center">
<p>
<unsubscribe>Unsubscribe</unsubscribe>.
</p>
</td>
</tr>
</table>
</div>
<!-- /content -->
</td>
<td></td>
</tr>
</table>
<!-- END / MAIN EMAIL BODY -->
<!--[if mso]>
</td></tr></table></center>
<![endif]-->
I had the same issues here but got it solved when i wrote my CSS inline.
Try to write all your CSS inline.
How can I make these buttons all align left with about a 3px space between them and adjust their own size based on how much text is put into them?
Unfortunately I don't have access to my own CSS (someone charges hundreds for this privilege). I've been trying for hours but just can't figure it out:
<br>
<style>
.mylink {
padding: 10px 35px;
background-color: #434343;
color: #fffFFF;
text-transform: uppercase;
letter-spacing: -.2px;
text-decoration: none;
font-family: helvetica,arial,sans-serif;
border-radius: 5px;
font-size: 12px;
width: 100%
}
.mylink:hover {
background-color: #ff0000; color: #fffFFF;
}
</style>
<table width="100%">
<tbody>
<tr>
<td width="0%" style="text-align: left;">
<a class="mylink" href="http://www.zzz.com/">ZZZ</a>
</td><td width="0%" style="text-align: left;">
<a class="mylink" href="http://www.aaa.com/">AAA</a>
</td><td width="0%" style="text-align: left;">
<a class="mylink" href="http://www.FFF.com/">FFF</a>
</td>
</td>
</tr>
</tbody>
</table>
Assuming that your other CSS is working by putting it inline (like you have put it), this should work, though a little hacky (floating cells and rows is ... unusual). I'd get rid of the table altogether if the effect here is what you want:
<style type="text/css">
.mylink {
padding: 10px 35px;
background-color: #434343;
color: #fffFFF;
text-transform: uppercase;
letter-spacing: -.2px;
text-decoration: none;
font-family: helvetica,arial,sans-serif;
border-radius: 5px;
font-size: 12px;
float:left;
}
.mylink:hover {
background-color: #ff0000; color: #fffFFF;
}
tr, td {
float:left;
padding:0;
}
</style>
<table>
<tbody>
<tr>
<td>
<a class="mylink" href="http://www.zzz.com/">ZZZZZZZZ</a>
</td>
<td>
<a class="mylink" href="http://www.aaa.com/">AAA</a>
</td>
<td>
<a class="mylink" href="http://www.FFF.com/">FFF</a>
</td><!-- Remove the extra </td> here. -->
</tr>
</tbody>
</table>
What this should look like if it works: https://jsfiddle.net/cmhqr3dg/
I believe this is the effect you are going for.
<br>
<style>
.mylink {
padding: 10px 35px;
background-color: #434343;
color: #fffFFF;
text-transform: uppercase;
letter-spacing: -.2px;
text-decoration: none;
font-family: helvetica,arial,sans-serif;
border-radius: 5px;
font-size: 12px;
width: 100%
}
.mylink:hover {
background-color: #ff0000; color: #fffFFF;
}
td {
float: left;
margin: 0 3px;
}
</style>
<table width="100%">
<tbody>
<tr>
<td>
<a class="mylink" href="http://www.zzz.com/">ZZZZZZZZZZ</a>
</td>
<td>
<a class="mylink" href="http://www.aaa.com/">AAAAAAAAAAAAAAAAAAAAA</a>
</td>
<td>
<a class="mylink" href="http://www.FFF.com/">FFF</a>
</td>
</td>
</tr>
</tbody>
</table>
I removed the style tags from the "td" elements and added the following into the "style" tags
td {
float: left;
margin: 0 3px;
}
I'm trying to figure out how to emulate this image using HTML and CSS. It will be something that will be displayed below the avatar on a message board.
This is what I have so far: https://jsfiddle.net/J7VBV/220/
table.avatarStats {
border-spacing: 0;
border-collapse: collapse;
text-align: center;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
<table class="avatarStats" width="200" border="0">
<tr>
<td bgcolor="purple">RECENT WR<br /><strong>61%</strong></td>
<td bgcolor="teal">OVERALL<br /><strong>55%</strong></td>
</tr>
<tr>
<td bgcolor="purple">RECENT WN8<br /><strong>2469</strong></td>
<td bgcolor="teal">OVERALL<br /><strong>1737</strong></td>
</tr>
</table>
The main problem I'm having is decreasing the size of the text above the numbers. Nothing I've tried is making the text smaller.
Also, is there a better way of bolding the numbers?
Use this
table.avatarStats {
border-spacing: 0;
border-collapse: collapse;
text-align: center;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
td small{
font-size:7pt;
font-weight:bold;
}
td strong{
font-size:18pt;
font-weight:bold;
}
<table class="avatarStats" width="200" border="0">
<tr>
<td bgcolor="purple"><small>RECENT WR</small><br /><strong>61%</strong></td>
<td bgcolor="teal"><small>OVERALL</small><br /><strong>55%</strong></td>
</tr>
<tr>
<td bgcolor="purple"><small>RECENT WN8</small><br /><strong>2469</strong></td>
<td bgcolor="teal"><dev font-size: 10pt;><small>OVERALL</small><br /><strong>1737</strong></td>
</tr>
</table>
You can use CSS to make the font smaller.
font-size: 10pt;
Just replace 10pt with whatever size you want to use.
I would use a CSS class like:
.small {
font-size: 10pt;
}
and add
class="small"
to the text you want to be small
You can do like this.
table.avatarStats {
border-spacing: 0;
border-collapse: collapse;
text-align: center;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
.cap{
font-size:8px;
font-weight:normal;
}
td{
font-weight:bold;
font-size:22px
}
<table class="avatarStats" width="200" border="0">
<tr>
<td bgcolor="purple"><span class="cap">RECENT WR</span><br /><strong>61%</strong></td>
<td bgcolor="teal"><span class="cap">OVERALL</span><br /><strong>55%</strong></td>
</tr>
<tr>
<td bgcolor="purple"><span class="cap">RECENT WN8</span><br /><strong>2469</strong></td>
<td bgcolor="teal"><span class="cap">OVERALL</span><br /><strong>1737</strong></td>
</tr>
</table>
Adjust the font-size accordingly as needed
try this https://jsfiddle.net/fd9x06jq/
table.avatarStats tr td strong{
font-size:9pt;
font-weight:bold;
color:black
}
Although I'd advise some changes to your markup, add this to you CSS:
table tr td:last-child{
font-size: 8pt;
}
EDIT:
My first code was off. Now it's correct. Here's a fiddle
Updated your code here: https://jsfiddle.net/70gtky65/1/
<table class="avatarStats">
<tr>
<td>RECENT WR<br/><span>61%</span></td>
<td>OVERALL<br/><span>55%</span></td>
</tr>
<tr>
<td>RECENT WN8<br/><span>2469</span></td>
<td>OVERALL<br/><span>1737</span></td>
</tr>
</table>
<style type="text/css">
table.avatarStats {
border-spacing: 0px;
text-align: center;
color: white;
font-family: Arial, Helvetica, sans-serif;
width: 108px;
}
table.avatarStats td {
font-size: 7px;
width: 50px;
padding: 2px;
}
table.avatarStats td span {
font-size: 16px;
}
table tr td:first-child {
background-color: #7842B3;
}
table tr td:last-child {
background-color: #459ABD;
}
</style>
You should try to avoid inline CSS and here is why
A table I create in HTML for use in an Outlook email signature seems to show strange problems, adding extra spacing.
Here is how it looks in Outlook:
Here is how it looks in Chrome:
The code is as below:
<html>
<head>
<title>JohnDoe</title>
<style>
p {
align:justify;
}
#contentTable{
padding-top: 25px;
padding-right: 35px;
padding-bottom: 25px;
padding-left: 35px;
width: 480px;
height: 105px;
}
#logo{
height: 210px;
width: 228px;
padding-left: 0;
padding-right: 0;
padding-top: 0;
padding-bottom: 0;
margin: 0;
border: 0;
padding: 0;
display: block;
border-collapse:collapse;
}
.table{
border-collapse:collapse;
}
#nameRow{
height: 18px;
}
#nameField{
font-size: 24;
font-family: "Helvetica";
color: #73A84D;
font-weight: bold;
width: 100%;
}
#dirRow{
height: 14px;
}
#dirField{
font-size: 18;
font-family: "Helvetica";
color: #606062;
}
.descRow{
}
.descField{
font-size: 10;
font-family: "Helvetica";
font-weight: 900;
color: #96989A;
}
.valueField{
font-size: 10;
font-family: "Helvetica";
font-weight: 900;
color: #606062;
text-align: justify;
}
</style>
<body>
<table id="contentTable">
<tr>
<td>
<img src="http://s14.postimg.org/eo35t2l4t/logo.jpg" />
</td>
<td>
<table id="infoTable">
<tr id="nameRow">
<td id="nameField">JOHN DOE</td>
</tr>
<tr id="dirRow">
<td id="dirField">
Attorney
</td>
</tr>
<tr>
<table>
<tr>
<td>
<p id="descFieldPara" class="descField">
PHONE:<br>
EMAIL:<br>
<br>
URL:
</p>
</td>
<td id="valueFieldPara" class="valueField">
<p>+ 12 3456 789 012<br>JOHN.D#BLAHBLAH.COM.US<br>ATTORNEY#BLAHBLAHJOHNDOE.COM.US<br>WWW.BLAHBLAHJOHNDOE.COM.US
</p>
</td>
</tr>
</table>
</tr>
</table>
</td>
</tr>
</table>
</body>
</head>
</html>
Can someone tell me what is the reason for this discrepancy?