Why should we use CSS rather than HTML to create borders for our tables?


Why should we use CSS rather than HTML to create borders for our tables?


Within software engineering, there is a design principle known as “separation of concerns” which aims to create scalable, more easily maintainable coding architectures. For web developers, this principle guides us to keep our structure (HTML) separate from our presentation (CSS).


Where in HTML code should I use CSS to add borders?


You will reference a .css file from your .html file in which you will have written all the code necessary to style your webpage (including table borders) rather than adding it onto your .html file :slight_smile:


cant we just use div to border them?


I totally understand the explanation, But in my opinion, it still does not make sense.
Code process always should be simple and easy. By separating ‘making borders’ from html, we are not making it easy, but complicated.
I prefer the old way.


Honestly, I still do not get this.


I agree with you. But being a pro entails being competent and adopting a proper professional way of doing things.


Hold on… You are not the only one :smiley:


Not a pro but I understand the intention or principle here. The goal of your html file is to setup and define the structure and content of your page. It’s better to keep the styling (CSS) separate so that you can style similar and related content in one swoop.

With the old way, you would need to style every element or structure (eg. tables, list) individually in the html. With the new way you can style just one, a few or any amount of elements you the designer deem similar in function or purpose or position very easily.

Hope this helps.


Zormus nailed it. I’m not pro on this either but it makes sense that it’d be cleaner to separate style from substance. If HTML is like the skeleton and muscular systems that make up the core pieces of a page, CSS is like the skin put over top of it; your skin is one large organ with consistent properties of its own that only have to be defined once, and if you had separate skin systems to cover each limb of your skeleton/musculature structure, that would create lots of unnecessary extra seams and internal complex joinery, which creates room for more flaws and errors and also makes the whole system messier to examine or mentally break down.


Thanks! Helped me) as I just wondered why I have to use different types of notations for single page.

1 Like

Here’s the thing…you don’t. Eventually, we’ll get to the point where we have taken the codeacademy.com CSS course and are ready to collaborate code.

(for example) Having an index.html file tab open in our Text Editor/IDE while simultaneously writing code in a .css tab that would point directly to the second row of the table.

OR you can INSERT the CSS code like illustrated in the image below although is trickier and it is recommended by most professionals to keep codes separate.


1 Like

I’m new to this as well, but I don’t believe div produces an actual physical effect on the webpage. We use

in order to group a certain section of our code, so that we can easily style it later with CSS or something else.
1 Like

If you put everything in the same box “html” file, you will be creating a messy code and unreadable.

1 Like

If you put everything in the same box “html” file, you will be creating a messy code and unreadable.
This is why CSS is important.

This post was flagged by the community and is temporarily hidden.

So, according to the matters of this discussion, borders would be CSS oriented? Thus, it is regarded as “separation of concerns”?

Creating borders, making the table look good belows to the desing aspect of a website. Therefore, CSS would be better sutied for it. HTML is used for content eg. adding words, tables and pictures.

I found a good short video that would explain this concept well.

Hope it helps! Enjoy learning!


This channel is awesome ~thanks for sharing~ she made it easy to understand