Images in a <td> html table?

HTML & CSS
1

It is difficult to find ways to add an icon in a table. I have found one way using css and content. Are there any other smarter or better ways to add icons (using vanilla .svg)?

.edit {
  content: url("https://crud.go4webdev.org/icn/edit.svg");
}
2

Unless I’m missing something in your requirements you can always put an img tag (or an SVG) inside a td. I’m not sure what a vanilla SVG is. :shifty:

3

Yes, this is another way. But how do I add an eventListener in order to make it interactive? Add a class to the <td> or <img>?

vanilla = “having no special or extra features; ordinary or standard” :slight_smile: In my case I want to avoid to download a complete awesome font just using one or two icons.

4

That’s a Javascript question, not HTML/CSS.

5

Try FontAweSome:

<!-- LINK --> 
<link rel="stylesheet" 
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"

<!-- USAGE -->
<div class="backToTop" >
    <a href="#top">
      <span> Back To Top </span>
      <i class="fas fa-arrow-circle-up fa-2x">&nbsp;</i>
    </a>
6

But OP has said:

2 Likes
7

Whoops, I missed that :frowning:

Edit:

I’m confused :slight_smile:

It looks like Fontawesome does not use images.

Can someone explain how Fontawesome replaces their images with the following CSS:


#mainMenu .home a:before {
content : "\f015";
}
#mainMenu .logout a:before {
content : "\f2f5";
}
#mainMenu .login a:before {
content : "\f2f6";
}
#mainMenu .register a:before {
content : "\f25d";
}
#mainMenu .search a:before {
content : "\f002";
}
#mainMenu .email a:before {
content : "\f199";
}

I also checked and found the CDN Fontawesome stylesheet takes about one tenth of a second to download… and cached on subsequent page loads!

2 Likes
8

“Font-awesome CDN makes the CSS load asynchronously which does speed it up but Google would still see it as render-blocking”. I have seen this using Google fonts as well on web.dev, so I avoid any kind of downloading if I can (including jQuery of course).

1 Like
9

No it does not use images it uses fonts. Hence fontawesome :slight_smile:

They are Unicode characters in a font just like normal letters. You are just displaying a font character which is designed to be an icon and not a letter.

3 Likes
10

It looks like you are wanting site visitors to edit cells in a table after clicking on a pencil icon.

One option is to give the cells a contentEditable="true" attribute so the cells can be directly edited on the web page without clicking an icon. This is demonstrated in the CodePen below. I have included event listeners for every cell to monitor for any changes to cell content. In this example, an alert box pops up giving the location of the cell (zero based numbering) and its new content.

1 Like
11

The table in the example consists only of a subject column, but in production there will be a popup window that contains other columns and settings. This is the plan. But your suggestion may work in some other cases. Thank you!

12

I would add an ID to each image and then use JavaScript to add each event listener.

Alternatively, especially if you have a large number of rows or a variable number of rows, use document.querySelectAll to add a listener to all pencil images. This is demonstrated below, selecting only the pencil images. If you click on a pencil the table row number will be displayed.

1 Like
13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.