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


#1

Question

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).


FAQ: Learn HTML Tables - Tables - Table Borders
#4

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


#5

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:


#6

cant we just use div to border them?


#7

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.


#8

Honestly, I still do not get this.


#9

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


#10

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


#11

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.


#12

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.


#13

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


#14

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.

51%20PM


#15