How do you make table row's and data's stay proportionate to each other?

Question

In HTML, I can use tables pretty well... but I have one *little* problem.

Let me show you.

https://code.sololearn.com/WnnZxIg403RP/?ref=app

BEHOLD! A TABLE!

...Now, everything would be perfect, with one exception...

Even with how I preset the table's and table data's proportions, if I ad one little thing inside a table data...

https://code.sololearn.com/WL3i918oTjU0/?ref=app

The ONLY difference between the two codes, is that that^ one has a period in one of the table datas. A PERIOD!

Yet for some reason, the table finds the need to extend the ENTIRE ROW it is in to TRIPLE all the other rows on the ENTIRE TABLE!

I... I don't even want to know the idiot who programmed HTML to make tables so disproportionate. Just because of one little character which could EASILY fit in the table data that was not all extended...

I just want to know, how the heck do I fix this?

Answer 1

You can add to the CSS page:

td {
width:20%;
}

Also, just an observation; you seem to omit a lot of HTML closing tags. 5 missing </tr> tags for one. This can lead to very unexpected behaviour unless corrected.

Answer 2

All will be right!
Keep patience and someone will answer your question...I can't pretty much explain because I myself is not perfect in it...☺

Answer 3

^^ Okay, thanks for catching that. Copy pasted the table from something else, and I didn't notice those errors.

Anyways, I fixed it, but...

It STILL is disproportionate!

Answer 4

Haha! Now to just fix the height of the column, and I'm good! Thanks!

Answer 5

Glad it worked out for you!

I don’t know how much time you want to spend on HTML, but I’d recommend trying to learn CSS too. Rather than adding “width=20%” to every single <td> tag, you could do it all in one go with what I gave you.

Like I say, it depends on how much you want to do, but it could save you a lot of time and frustration from typing the same things over and over in the long run.

Answer 6

Not a problem - happy coding!

Answer 7

oh, td, not tr... for 20%.

Answer 8

I will try this again.

Answer 9

Yep! This works! Thanks for the help!

Answer 10

^I already passed the CSS course... and the JS one... and C++.

I am just trying to do a project that can only be done on sololearn through HTML+CSS+JS.

...as there is no graphic interface to work with on anything else.

...I guess I just found it easier to do find and replace

<td

with

<td width=20%

...

but that is just me.

Thanks anyways.

Now, off to continue working on this.

Answer 11

Make use of width and analys it. Then it adapt to its width