How can I get more efficient at designing tables for web in Photoshop?

It takes me too much time (IMO) to design tables in Photoshop. I need to move rows, columns and stuff easily. I’d like to be able to get through this faster.
I’ve tried InDesign and Illustrator and vector exports but it ends up all merged into Photoshop.. It’s for web. Front-End developers are going to integrate those in HTML and CSS.


Honestly.. Indesign. Among the Adobe Apps tables are easiest formatted in Indesign in my experience.

Set the table up in Indesign, save as PDF or EPS, open in Illustrator to tweak if needed (or use in layout there). Although, you could just place an EPS in Photoshop directly. Or the PDF, if you want it rasterized.

If Photoshop delivery is mandatory (I hate that)…
Then place as smart object in Photoshop. Or, alternatively, you can deconstruct in Illustrator via copy/Paste in Front (or back) and create a layer structure for the table in AI. Then export AI to PSD with layers in tact. This results in a layered PSD which can then simply be moved to your primary PSD.

Seems like a lot of work, but it’s way, way easier than formatting tables in Photoshop, or Illustrator for that matter.

In most cases tables in a web layout are merely representational. To that end, I configure a rectangle for the overal size, then merely add 3 or 4 rows of data to show zebra striping and headers. I don’t waste time formatting an entire table needlessly when it’ll be filled by a programed loop.

Source : Link , Question Author : Steph89 , Answer Author : Scott

Leave a Comment