Why should we use CSS rather than HTML to create borders for our tables?
Answer
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).
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
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.
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.
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.
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.
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.