Hello!
I am quite new to the community (I joined about 2 minutes ago) and am sorry if I am doing anything wrong… Anyways, I am creating a forum from scratch using PHP, HTML, CSS, jQuery, JS, the whole lot and am close to the point where I need to start styling/designing the forum. I am a n00b at CSS since I mostly work with HTML+PHP nowadays so I’m confused how I would turn this:
Into something like this: https://invadedlands.net/forum/
Basically I am using PHP and looping each category/topic into a table to make things a bit more organized. But as you can see from the example (InvadedLands.net) they don’t have any borders and everything is super neat and tidy. Of course, this is a general question so I’ll try and narrow things down. I now how to remove the borders, but when doing so everything becomes super weird/disorganized while I want it to look a bit more tidy (note: can’t add example since I got blocked from adding a link)
So I guess my main question is: How do I turn a table into a forum? What are some key styling tips I need to do so?
Thanks for your help!
-Xp10d3
Note:
If you need my code here it is: https://sourceb.in/6ec4425c83
Also I had to convert two of my images into links cause I got blocked from adding more xD Sorry about that.
They don’t use any html tables (<table>) at all in that site (just like the Sitepoint forum). It’s made with normal html and css (divs and semantic html elements etc).
That’s purely a design question as you can make the site look as you wish.
The image of the design you showed is an old fashioned forum design so if you want something more modern then you should look at sites like Sitepoint or indeed the ones you linked to which get away from that old forum layout shape.
In the end you can basically style it as you want but you need to come up with the idea of what you want and then style it like that
It’s more of a design question than an html css one
Do you know how to use developer tools to look at the source code for sites? In all popular browsers, just use F12 and you get access to all the HTML, CSS and JavaScript for the page.
I consider CSS to be difficult to learn and this probably is an excellent way to learn it. Do not expect to do it all in a few days; you can only learn pieces at a time.
I think it helps to note that there is not much functional difference between HTML tables and CSS tables. They do nearly the same thing except we use either HTML or CSS to create them.
If you mean you can create the look of a table using CSS and no table tags then yes that’s correct but essentially there is no such thing as CSS tables You can make something look like a table but semantics will be lost if the usage is not correct.
There are values for the display property that can mimic some of the table properties for layout purposes and give you some (not colspan or rowspan) of the behaviour that tables have. However we should make it ultimately clear that html tables (the table tag) are to be used for tabular data only and we should not replicate table data with non semantic tags such as divs (and vice versa) .
Thank you so much for your input This was really helpful. Yeah, I’m just asking this cause I suck at designing and ran into a big wall when I tried to attempt a design similar to the links I posted I’ll definitely take a look at whether I can change my table to a div or something.
Yes, I’ve tried using developer tools. That was probably the first thing I should have done, though xD I’ll definitely have to do that. Quick question, though. I’ve seen a LOT of sites that use Discourse and am wondering whether it’s free? Like you said it’s probably a good idea to check out the code of a forum before continuing into design, notifications, etc.
EDIT: Yep looks like Discourse is free lol. I’ll take a look at it. Thanks for your guys’s help!
This was really helpful. Yeah, I’m just asking this cause I suck at designing and ran into a big wall when I tried to attempt a design similar to the links I posted 
I’ll definitely take a look at whether I can change my table to a div or something.