MS Excel: Copy as formatted table


In this quick tips, we’ll check how can we paste a specific portion of the excel sheet as formatted table, in particular to email. Microsoft Excel is a widely used tool for spreadsheet and used for storing useful data meant for calculation, chart etc.

Now, sometimes you may need to copy a particular portion of the excel sheet to the email so that the receivers can view it in tabular form and get the intended message. If you select a portion from the excel sheet and paste as it is in the composer window of email, it will not serve the desired purpose. So, in this small tip, we’ll try explore those possibilities via which we can keep the tabular format intact while paste a portion from an excel sheet to your email compose window.

Before we deep dive into the possibilities, let’s quickly have a view of how it looks when we directly copy a portion of an excel sheet to email ( gmail in example but follows the same rule for other email service providers too) –

1

Image 1 is screenshot of what I have created in the excel sheet while image 2 shows the email window and how it looks when we paste the copied portion from that excel sheet. It’s clear that we need a better approach to get this particular job done in an efficient way to keep the formatting intact. For that we may follow either of the following  2 options from many.

Option 1:

This is the simplest way possible. You can take a screenshot or make use of any clipping tool to generate an image and paste that in the email. You can even do that right from within the MS Excel sheet. To do that,

  • Select the portion you want to be copied
  • Copy (CTRL + C)
  • Right click on the selected portion
  • Go to “Paste Special…”
  • Click on paste as “Picture”
  • Copy (CTRL + C)

2

3Now, if you paste this on your compose box, you will get a beautiful view and visually same as what you wanted. Something like the image on the right side. Have you noticed the big caret at the end? It’s because it’s just an image and obviously, you will not be able to edit /select any particular text in the table.

 

Option 2:

The problem with the above option is, it is not search friendly. If you use email regularly for various purposes then you might already have realized the importance of being able to search your old emails based on keywords from the email body. With the first approach it is impossible to search a particular word or text from the table as it is just an image. So you may like this approach than the previous one as it copies the selected portion of the excel sheet as a formatted table. So, you can make use of the search functionalities as per your need.

To do this,

  • Select the required portion from the excel sheet
  • Click on the “Quick Analysis” icon or press CTRL + Q
  • Click on “Tables” tab
  • Click “Table”
  • Do the necessary table formatting
  • Copy (CTRL + C)

4

You’ll get the same result while pasting this on your email compose box but as said, texts within this table will now be included in the search result.

Hopefully, this small tips will be useful to you.
Please drop a comment in case of any queries or suggestions 🙂

 

CSS: Under-utilized content property


css

#Batman {
background-color: black;
clear: both;
visibility: hidden;
content: “I’m Batman”; }  /* @CSSHumor */

Introduction:

In this post we’ll discuss about

  • (The Theory) use and importance of CSS property – content
  • (The Magic) creating printable links using CSS content and pseudo-elements

If you are not interested in ‘The Theory’ which is available in almost all CSS books and web tutorials like w3schools.com, you can start with ‘The Magic’, the feature which motivated me to write this blog post.

CSS ‘content’ Property:

The primary use of CSS is to describe the presentation semantics of an HTML documents but, we can also use CSS for content generation. With content property we can inject a piece of information to an existing document. We have to use content property along with pseudo-elements like :before, :after etc.

Example:

I feel, the best use of content property is to inject the URL of a hyperlink next to it’s text content.

a:after
{
   content: "(" attr(href) ")";
}

This will inject the URL mentioned within the href tag next to each link and will be decorated with a pair of parenthesis. For detailed list of content property values you may refer w3Schools.com.

Create Printable Links:

Before we start let’s have a look on the below paragraph of an HTML page-

“If you want to start learning web technologies then there is no better place than W3School to start with. For Microsoft technologies you can get comprehensive help from MSDN. My suggestion is to follow blogs like Technology Talks, Daily Dot Net Tips, Dot Net Tricks, Kunal Chowdhury, SQL Authority etc. ”

The HTML code for this is

printable_link_1

Note that this HTML snippet has certain links to some other places. Now let someone wants to print the page containing the above paragraph. He/she will get the print copy as the above paragraph but

  • What about the links?
  • How can the user get the links for Technology Talks, Daily Dot Net Tips, Dot Net Tricks, Kunal Chowdhary, SQL Authority etc. from the print copies?
  • Is there any way that we can show links on the print copy but not in the web page?

Solution

The easiest solution is to use content property of CSS along with pseudo-element :after. And as we want the URL to be injected next to it’s corresponding link only in the print page and not in the page that is rendered to the browser, we need to mention media type as ‘print’. So code view of the final document may look like

<style media="print">
    a:after {
      content: "(" attr(href) ")";
    }
</style>
<div>If you want to start learning web technologies then there is no better place than
 <a href="http://www.w3schools.com/">W3School</a> to start with.For Microsoft technologies
 you can get comprehensive help from <a href="http://msdn.microsoft.com/en-US/">MSDN</a>.
 My suggestion is to follow blogs like <a href="https://suvendugiri.wordpress.com/">
 Technology Talks</a>, <a href="http://dailydotnettips.com/">Daily Dot Net Tips</a>,
 <a href="http://www.abhisheksur.com/">Dot Net Tricks</a>, <a href="http://www.kunal-chowdhury.com/">
 Kunal Chowdhury</a>, <a href="http://blog.sqlauthority.com/">SQL Authority</a> etc.</div>

Live Demo

You can view the live demo here. To spot the difference just view the print preview.

Conclusion

Now, we are able to do the magic with which we can create better web pages with links for both kind of users i.e, online users and offline users (with printed material).

Hopefully, you have enjoyed reading this post.
I’ll love to read a feedback from you.
Thanks !

HTML: Design table with thin single line border


SingleLineBorder_2

In this quick tips, we will see a way to render an HTML table with single line(thin) border.

Generally when we write mark-up for HTML table with border specified, it renders as Fig. A which looks ugly with a very thick border. In Fig. A I have used markup starting with following line

 
<table border="1" cellpadding="0" cellspacing="0" width="200px">

Figure A & Figure B

Now, to have the HTML table to be rendered as Fig. B with thin border, we need to add style attribute with css property border-collapse set to collapse.

<table border="1" cellpadding="0" cellspacing="0" width="200px" style="border-collapse:collapse;">

I hope, it’s useful.

ASP.Net: Disable TabIndex Focusing


If you need to disable/restrict focusing on one or more controls in a page then just mention TabIndex=”-1″.

This is useful particularly when you have some read only controls in your WebForm and you don’t want the control to move(focus) to those controls.

This is known to most of the web-developers but hopefully it will be useful to others.