Laying out a "grid" of committee members in WordPress

I have a layout question for a page on a WordPress site I am working on. I need to display a list of 75 committee members with photos and credentials to the right of the images, in a 3-across grid style layout. Please see screenshot for exactly how I would like this to appear. A similar layout on other areas of the site (with fewer members) has been accomplished using individual tables.

The limiting part of this is that each row is actually a separate table, and is cumbersome to code plus I suspect it is not the most SEO-friendly way to present info. Also, considering the length of this new list it would be preferable to have it laid out in a way where it is one continuous element.

So my question is: what is the recommended method for accomplishing this task on a WordPress site? I know there is a way to do it using CSS (divs?) but am unclear exactly how. The other very important element is that the list of members will be displayed alphabetically by last name, and changes will need to be made from time to time. This requires a fluid-type layout so that inserting or removing an entry will not require extensive recoding to "fill in" the gaps/make the rest of the entries wrap. Thank you in advance for your assistance. 
grid-of-committee-members.jpg
CuriousAboutAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

marketizeitCommented:
What theme are you using?
0
Jason C. LevineNo oneCommented:
This is less of a WordPress question and more of a simple layout exercise using PHP and hopefully MySQL data.  

First of all, a table is perfectly fine for this kind of display.  Nested tables, not so much, but your screenshot doesn't indicate a need for a nested table.  SEO isn't an issue. It's still okay to use tables to present tabular data :)

Assuming the list of committee members is in a database, here is how I would do it.

1) Make a new custom page template for the committee display.
2) Query the database to return the population sorted by whatever parameter you want
3) Start the table in the desired part of the page, open the first row
4) Using PHP, create a table cell and echo out the committee member data and photo and increment a variable
5) Check to see if the newly increment end variable can be divided by 3. If so, I have reached the end of this row and issue the closing row tags and open the next row.
6) Loop through steps 4 and 5 until all records have been echoed out, the close the final row and the table.

So the only thing that makes the above WordPress-specific would be having to use $wpdb to do the initial database query.  You could use divs instead of a table but I don't think it's as efficient and actually harder to layout.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
COBOLdinosaurCommented:
As the resident "table layout crusher"; I can concur with Jason that using a table for layout in this case is correct, because you are presenting tabular data and that is what tables are for.  Using div is possible, but not practical unless you need a flexible layout where the presentation must switch from 3-column to 2-column for small screens.

Cd&
0
CuriousAboutAuthor Commented:
Thank you!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
WordPress

From novice to tech pro — start learning today.