Compact, Intuitive Ways of Displaying Tags of each Item in a Table?

Question

I haven't an iota of user interface design background and I'd like some feedback for this page:

http://pumpout.anyhowstep.com/Search.php?FilterLevel=on&MinLevel=13&MaxLevel=15&FilterMode=on&Mode1=on&FilterCategory=on&Category1=on&Paginate=on

The page will show a table. Each row has a column for "Tags". There is a fixed number of tags (about 30) and the intended audience knows what each tag means.

However, displaying the tag data gets pretty messy; on both desktop and mobile screens.

Each row can have none, a few or many tags and it creates a lot of clutter for that column.

I'd like to know if there's any way to improve this. I've thought of having little icons (static or animated) instead of words for each tag to make it compact and make the display space used per tag consistent but there are no images that the intended audience or myself have ever associated with the tags and I can't come up with anything suitable.

So.. What are my options here? Or is this a non-issue because having many tags for each of the many results should make it clutter?

Answer 1

There are different kinds of visualisations depending on your need (particular case). Also is very important if those tags play a "functional role" in your flow, if they have actions, filters or more related details, then you should consider keeping them visible & ordered in a simple manner.

Here are some examples: You should also consider aligning the headers with the actual data. Ex: if the header is left-aligned, align the data to the left; avoid center-align for category etc.

All those small tweaks will make the table easier to scan.