• Log InLog In
  • Register
Liquid`
Team Liquid Liquipedia
EDT 05:04
CEST 11:04
KST 18:04
  • Home
  • Forum
  • Calendar
  • Streams
  • Liquipedia
  • Features
  • Store
  • EPT
  • TL+
  • StarCraft 2
  • Brood War
  • Smash
  • Heroes
  • Counter-Strike
  • Overwatch
  • Liquibet
  • Fantasy StarCraft
  • TLPD
  • StarCraft 2
  • Brood War
  • Blogs
Forum Sidebar
Events/Features
News
Featured News
Serral wins HomeStory Cup 2914Serral wins Maestros of the Game 243ByuL, and the Limitations of Standard Play3Team Liquid Map Contest #22: Results and Winners7Code S Season 2 (2026): RO4 and Finals Preview12
Community News
Weekly Cups (July 27-Aug 2): SHIN's big week0SC4ALL II: Brood War - $2500 - Dec 5-67SC4ALL II announced - $10,000 prize pool, Dec 5-64PIG STY FESTIVAL 8.0! (13 - 23 August)11Neeb returns to progaming; rejoins ONSYDE18
StarCraft 2
General
Clem: "I don't have that much hope in Blizzard" Geoff 'iNcontroL' Robinson has passed away Neeb returns to progaming; rejoins ONSYDE State of the Game podcast archive? Balance hotfix patch 5.0.16b (July 16)
Tourneys
Tasteless Time Warp: SC Evo Showmatch (May 25) SC4ALL II announced - $10,000 prize pool, Dec 5-6 Sparkling Tuna Cup - Weekly Open Tournament PIG STY FESTIVAL 8.0! (13 - 23 August) RSL Revival: Season 6 - Qualifiers and Main Event
Strategy
[G] Having the right mentality to improve
Custom Maps
Nexus Wars 2021 GUIDE [M] (2) Industrial Park
External Content
The PondCast: SC2 News & Results Mutation # 537 Hostile Territory Mutation # 536 Railroad Switch Mutation # 535 Assembly of Vengeance
Brood War
General
ASL22 General Discussion [Personal Project Share] Terran Defense v0.60 Data needed BGH Auto Balance -> http://bghmmr.eu/ BW General Discussion
Tourneys
2v2v2v2 Tournament SC4ALL II: Brood War - $2500 - Dec 5-6 [Megathread] Daily Proleagues Escore Tournament - Season 3
Strategy
Any training maps people recommend? Fighting Spirit mining rates Simple Questions, Simple Answers Odyssey Mineral Stack Saturation
Other Games
General Games
Stormgate/Frost Giant Megathread ZeroSpace Early Access is Now Live! General RTS Discussion Thread Nintendo Switch Thread Beyond All Reason
Dota 2
Looking for a Dota Mentor Official 'what is Dota anymore' discussion
League of Legends
[TL LoL EUW IHs] Teemo shall perish TSM pausing esports and CLG Dead
Heroes of the Storm
Heroes of the Storm 2.0
Hearthstone
Deck construction bug
TL Mafia
TL Mafia Power Rank TL Mafia Community Thread NeO.D_StephenKing vs This Guy From 1 Million Dance
Community
General
US Politics Mega-thread European Politico-economics QA Mega-thread Russo-Ukrainian War Thread Artificial Intelligence Thread Things Aren’t Peaceful in Palestine
Fan Clubs
The Clem Fan Club INnoVation Fan Club The Scarlett Fan Club
Media & Entertainment
Movie Discussion! Anime Discussion Thread Series you have seen recently... [Req][Books] Good Fantasy/SciFi books
Sports
Football (Soccer) Thread TeamLiquid Health and Fitness Initiative For 2023 Formula 1 Discussion MLB/Baseball 2023 McBoner: A hockey love story
World Cup 2022
Tech Support
Computer Build, Upgrade & Buying Resource Thread Simple Questions Simple Answers FPS when play League Of Legend on laptop
TL Community
The Automated Ban List Northern Ireland Global Starcraft
Blogs
Please support my new stand…
Peanutsc
What is a Gamer?
TrAiDoS
Hello guys!
LIN1s
ASL S22 English Commentary…
namkraft
Poker (part 2)
Nebuchad
Customize Sidebar...

Website Feedback

Closed Threads



Active: 3249 users

HTML Help - Page 2

Blogs > Polemos
Post a Reply
Prev 1 2 All
Integra
Profile Blog Joined January 2008
Sweden5626 Posts
Last Edited: 2011-08-10 03:52:21
August 09 2011 18:23 GMT
#21
On August 10 2011 03:16 SarR wrote:
I strongly recommend that you do not use tables to arrange HTML elements. It could get real ugly for you should you decide to make changes later. Tables are so 1995

Use CSS instead to arrange your elements. Id even go so far as to say that tables are unnecessary in this age. CSS is the way you should be going.

To help illustrate here is a example:

CSSCode:
+ Show Spoiler +

*{ margin:0; padding:0;}
body{ font:100% normal Arial, Helvetica, sans-serif; background:#161712;}
form,input,select,textarea{margin:0; padding:0; color:#ffffff;}

div.box {
margin:0 auto;
width:500px;
background:#222222;
position:relative;
top:50px;
border:1px solid #262626;
}

div.box h1 {
color:#ffffff;
font-size:18px;
text-transform:uppercase;
padding:5px 0 5px 5px;
border-bottom:1px solid #161712;
border-top:1px solid #161712;
}

div.box label {
width:100%;
display: block;
background:#1C1C1C;
border-top:1px solid #262626;
border-bottom:1px solid #161712;
padding:10px 0 10px 0;
}

div.box label span {
display: block;
color:#bbbbbb;
font-size:12px;
float:left;
width:100px;
text-align:right;
padding:5px 20px 0 0;
}

div.box .input_text {
padding:10px 10px;
width:200px;
background:#262626;
border-bottom: 1px double #171717;
border-top: 1px double #171717;
border-left:1px double #333333;
border-right:1px double #333333;
}

div.box .message{
padding:7px 7px;
width:350px;
background:#262626;
border-bottom: 1px double #171717;
border-top: 1px double #171717;
border-left:1px double #333333;
border-right:1px double #333333;
overflow:hidden;
height:150px;
}

div.box .button
{
margin:0 0 10px 0;
padding:4px 7px;
background:#CC0000;
border:0px;
position: relative;
top:10px;
left:382px;
width:100px;
border-bottom: 1px double #660000;
border-top: 1px double #660000;
border-left:1px double #FF0033;
border-right:1px double #FF0033;
}


HTML CODE creating Forms without the use of tables with the above CSS:

+ Show Spoiler +

<form> <div class="box">
<h1>Contact Form :
</h1>
<label>
<span>Full name</span>
<input type="text" class="input_text" name="name" id="name"/>
</label>
<label>
<span>Email</span>
<input type="text" class="input_text" name="email" id="email"/>
</label>
<label>
<span>Subject</span>
<input type="text" class="input_text" name="subject" id="subject"/>
</label>
<label>
<span>Message</span>
<textarea class="message" name="feedback" id="feedback"></textarea>
<input type="button" class="button" value="Submit Form" /> </label>
</div>
</form>



As you can see the form contains less code compared to the table, and you don't have to struggle with all the colspan, width of each row and so forth Tables are just... bad in every way.
"Dark Pleasure" | | I survived the Locust war of May 3, 2014
Integra
Profile Blog Joined January 2008
Sweden5626 Posts
Last Edited: 2011-08-09 18:26:01
August 09 2011 18:24 GMT
#22
On August 10 2011 03:20 KeksX wrote:
Show nested quote +
On August 10 2011 03:16 SarR wrote:
I strongly recommend that you do not use tables to arrange HTML elements. It could get real ugly for you should you decide to make changes later. Tables are so 1995

Use CSS instead to arrange your elements. Id even go so far as to say that tables are unnecessary in this age. CSS is the way you should be going.

Edit:
Could you provide a screenshot of what you expect your HTML form to look like and id make some time to to recreate it using CSS as an example for you.


"to break a butterfly on a wheel"

He needs a table. He makes a table. :3

He doesn't need a table, he needs a form. Tables are for structuring complex data which contains 8 or more fields with X amount of rows. This is just a simple form and it's hard as hell designing a table compared to a list. he is doing 10 times the work for no real benefit.
"Dark Pleasure" | | I survived the Locust war of May 3, 2014
SarR
Profile Joined June 2011
476 Posts
August 09 2011 18:28 GMT
#23
On August 10 2011 03:20 KeksX wrote:
Show nested quote +
On August 10 2011 03:16 SarR wrote:
I strongly recommend that you do not use tables to arrange HTML elements. It could get real ugly for you should you decide to make changes later. Tables are so 1995

Use CSS instead to arrange your elements. Id even go so far as to say that tables are unnecessary in this age. CSS is the way you should be going.

Edit:
Could you provide a screenshot of what you expect your HTML form to look like and id make some time to to recreate it using CSS as an example for you.


"to break a butterfly on a wheel"

He needs a table. He makes a table. :3

Im not sure about what you're alluding to, but if you're referring to effort necessary vs the benefits, then that is also an argument in favor of CSS.

The only way Id ever consider recommending tables is for laying out dynamic data, for example, data queried from a database.
KeksX
Profile Blog Joined November 2010
Germany3634 Posts
August 09 2011 18:30 GMT
#24
On August 10 2011 03:28 SarR wrote:
Show nested quote +
On August 10 2011 03:20 KeksX wrote:
On August 10 2011 03:16 SarR wrote:
I strongly recommend that you do not use tables to arrange HTML elements. It could get real ugly for you should you decide to make changes later. Tables are so 1995

Use CSS instead to arrange your elements. Id even go so far as to say that tables are unnecessary in this age. CSS is the way you should be going.

Edit:
Could you provide a screenshot of what you expect your HTML form to look like and id make some time to to recreate it using CSS as an example for you.


"to break a butterfly on a wheel"

He needs a table. He makes a table. :3

Im not sure about what you're alluding to, but if you're referring to effort necessary vs the benefits, then that is also an argument in favor of CSS.

The only way Id ever consider recommending tables is for laying out dynamic data, for example, data queried from a database.

I mean, he's only learning the very basics. It would be better to start slowly then to get him into stuff he doesn't properly understand yet...
Integra
Profile Blog Joined January 2008
Sweden5626 Posts
August 09 2011 18:35 GMT
#25
On August 10 2011 03:30 KeksX wrote:
Show nested quote +
On August 10 2011 03:28 SarR wrote:
On August 10 2011 03:20 KeksX wrote:
On August 10 2011 03:16 SarR wrote:
I strongly recommend that you do not use tables to arrange HTML elements. It could get real ugly for you should you decide to make changes later. Tables are so 1995

Use CSS instead to arrange your elements. Id even go so far as to say that tables are unnecessary in this age. CSS is the way you should be going.

Edit:
Could you provide a screenshot of what you expect your HTML form to look like and id make some time to to recreate it using CSS as an example for you.


"to break a butterfly on a wheel"

He needs a table. He makes a table. :3

Im not sure about what you're alluding to, but if you're referring to effort necessary vs the benefits, then that is also an argument in favor of CSS.

The only way Id ever consider recommending tables is for laying out dynamic data, for example, data queried from a database.

I mean, he's only learning the very basics. It would be better to start slowly then to get him into stuff he doesn't properly understand yet...

its tables that are hard, lists are simple as hell.
"Dark Pleasure" | | I survived the Locust war of May 3, 2014
SarR
Profile Joined June 2011
476 Posts
Last Edited: 2011-08-09 19:01:13
August 09 2011 18:42 GMT
#26
EDIT: Spoilered for being a dumbass and not readying Integra's post thoroughly. Thought he was actually arguing for the use of tables over CSS.

+ Show Spoiler +
On August 10 2011 03:23 Integra wrote:
Show nested quote +
On August 10 2011 03:16 SarR wrote:
I strongly recommend that you do not use tables to arrange HTML elements. It could get real ugly for you should you decide to make changes later. Tables are so 1995

Use CSS instead to arrange your elements. Id even go so far as to say that tables are unnecessary in this age. CSS is the way you should be going.

To help illustrate here is a example:

CSSCode:
+ Show Spoiler +

*{ margin:0; padding:0;}
body{ font:100% normal Arial, Helvetica, sans-serif; background:#161712;}
form,input,select,textarea{margin:0; padding:0; color:#ffffff;}

div.box {
margin:0 auto;
width:500px;
background:#222222;
position:relative;
top:50px;
border:1px solid #262626;
}

div.box h1 {
color:#ffffff;
font-size:18px;
text-transform:uppercase;
padding:5px 0 5px 5px;
border-bottom:1px solid #161712;
border-top:1px solid #161712;
}

div.box label {
width:100%;
display: block;
background:#1C1C1C;
border-top:1px solid #262626;
border-bottom:1px solid #161712;
padding:10px 0 10px 0;
}

div.box label span {
display: block;
color:#bbbbbb;
font-size:12px;
float:left;
width:100px;
text-align:right;
padding:5px 20px 0 0;
}

div.box .input_text {
padding:10px 10px;
width:200px;
background:#262626;
border-bottom: 1px double #171717;
border-top: 1px double #171717;
border-left:1px double #333333;
border-right:1px double #333333;
}

div.box .message{
padding:7px 7px;
width:350px;
background:#262626;
border-bottom: 1px double #171717;
border-top: 1px double #171717;
border-left:1px double #333333;
border-right:1px double #333333;
overflow:hidden;
height:150px;
}

div.box .button
{
margin:0 0 10px 0;
padding:4px 7px;
background:#CC0000;
border:0px;
position: relative;
top:10px;
left:382px;
width:100px;
border-bottom: 1px double #660000;
border-top: 1px double #660000;
border-left:1px double #FF0033;
border-right:1px double #FF0033;
}


HTML CODE creating Forms using List instead of Tables with the above CSS:

+ Show Spoiler +

<form> <div class="box">
<h1>Contact Form :
</h1>
<label>
<span>Full name</span>
<input type="text" class="input_text" name="name" id="name"/>
</label>
<label>
<span>Email</span>
<input type="text" class="input_text" name="email" id="email"/>
</label>
<label>
<span>Subject</span>
<input type="text" class="input_text" name="subject" id="subject"/>
</label>
<label>
<span>Message</span>
<textarea class="message" name="feedback" id="feedback"></textarea>
<input type="button" class="button" value="Submit Form" /> </label>
</div>
</form>



As you can see the form contains less code compared to the table, and you don't have to struggle with all the colspan, width of each row and so forth Tables are just... bad in every way.


Cant argue with that. All the same its a very bad practice. For something simple like this for demonstration purposes then yes.

However, if he plans to put his HTML skills to practical use one day then he would be in a world of hurt if he practices this way of HTML coding.

Software development, and anything similar like website development is NEVER finished, its always a work-in-progress. When he needs to tweak the layout, which is a dead certainty as clients or whoever you're doing this for will want more, you'd find then that tweaking the CSS is a lot less stressful than rummaging through countless lines of table code just to change some simple thing.

Another very powerful benefit of using CSS is that you can re-use it very easily to arrange other elements in a similar fashion by manipulating the CSS selectors. With tables you'd be copying that code all over the place, when you could have that layout code all in one place using CSS and subsequently apply them to as many elements on as many html forms as you like with little more than a simple reference to the stylesheet file.

TLDR; I think its better he starts off with good practices, even with simple things like this.

Integra
Profile Blog Joined January 2008
Sweden5626 Posts
August 09 2011 18:52 GMT
#27
On August 10 2011 03:42 SarR wrote:
Show nested quote +
On August 10 2011 03:23 Integra wrote:
On August 10 2011 03:16 SarR wrote:
I strongly recommend that you do not use tables to arrange HTML elements. It could get real ugly for you should you decide to make changes later. Tables are so 1995

Use CSS instead to arrange your elements. Id even go so far as to say that tables are unnecessary in this age. CSS is the way you should be going.

To help illustrate here is a example:

CSSCode:
+ Show Spoiler +

*{ margin:0; padding:0;}
body{ font:100% normal Arial, Helvetica, sans-serif; background:#161712;}
form,input,select,textarea{margin:0; padding:0; color:#ffffff;}

div.box {
margin:0 auto;
width:500px;
background:#222222;
position:relative;
top:50px;
border:1px solid #262626;
}

div.box h1 {
color:#ffffff;
font-size:18px;
text-transform:uppercase;
padding:5px 0 5px 5px;
border-bottom:1px solid #161712;
border-top:1px solid #161712;
}

div.box label {
width:100%;
display: block;
background:#1C1C1C;
border-top:1px solid #262626;
border-bottom:1px solid #161712;
padding:10px 0 10px 0;
}

div.box label span {
display: block;
color:#bbbbbb;
font-size:12px;
float:left;
width:100px;
text-align:right;
padding:5px 20px 0 0;
}

div.box .input_text {
padding:10px 10px;
width:200px;
background:#262626;
border-bottom: 1px double #171717;
border-top: 1px double #171717;
border-left:1px double #333333;
border-right:1px double #333333;
}

div.box .message{
padding:7px 7px;
width:350px;
background:#262626;
border-bottom: 1px double #171717;
border-top: 1px double #171717;
border-left:1px double #333333;
border-right:1px double #333333;
overflow:hidden;
height:150px;
}

div.box .button
{
margin:0 0 10px 0;
padding:4px 7px;
background:#CC0000;
border:0px;
position: relative;
top:10px;
left:382px;
width:100px;
border-bottom: 1px double #660000;
border-top: 1px double #660000;
border-left:1px double #FF0033;
border-right:1px double #FF0033;
}


HTML CODE creating Forms using List instead of Tables with the above CSS:

+ Show Spoiler +

<form> <div class="box">
<h1>Contact Form :
</h1>
<label>
<span>Full name</span>
<input type="text" class="input_text" name="name" id="name"/>
</label>
<label>
<span>Email</span>
<input type="text" class="input_text" name="email" id="email"/>
</label>
<label>
<span>Subject</span>
<input type="text" class="input_text" name="subject" id="subject"/>
</label>
<label>
<span>Message</span>
<textarea class="message" name="feedback" id="feedback"></textarea>
<input type="button" class="button" value="Submit Form" /> </label>
</div>
</form>



As you can see the form contains less code compared to the table, and you don't have to struggle with all the colspan, width of each row and so forth Tables are just... bad in every way.


Cant argue with that. All the same its a very bad practice. For something simple like this for demonstration purposes then yes.

However, if he plans to put his HTML skills to practical use one day then he would be in a world of hurt if he practices this way of HTML coding.

Software development, and anything similar like website development is NEVER finished, its always a work-in-progress. When he needs to tweak the layout, which is a dead certainty as clients or whoever you're doing this for will want more, you'd find then that tweaking the CSS is a lot less stressful than rummaging through countless lines of table code just to change some simple thing.

Another very powerful benefit of using CSS is that you can re-use it very easily to arrange other elements in a similar fashion by manipulating the CSS selectors. With tables you'd be copying that code all over the place, when you could have that layout code all in one place using CSS and subsequently apply them to as many elements on as many html forms as you like with little more than a simple reference to the stylesheet file.

TLDR; I think its better he starts off with good practices, even with simple things like this.

what? are you responding to my post you quoted, because that essentially demonstrates what you just talked about why tables are bad.
"Dark Pleasure" | | I survived the Locust war of May 3, 2014
SarR
Profile Joined June 2011
476 Posts
August 09 2011 18:58 GMT
#28
Oh fuck......LOL Im doing like 3 things at once here so I just sped-read what you posted and "thought" I got the gist of what you were saying, you are actually saying the opposite.

My apologies for being a dumbass LOL.
Integra
Profile Blog Joined January 2008
Sweden5626 Posts
August 09 2011 19:03 GMT
#29
It's fine, you explained why tables are bad, so its all good
"Dark Pleasure" | | I survived the Locust war of May 3, 2014
SarR
Profile Joined June 2011
476 Posts
August 09 2011 19:05 GMT
#30
Love u babe...gimma a kiss.
Polemos
Profile Blog Joined March 2011
United States160 Posts
August 10 2011 03:46 GMT
#31
lol - I'm really not all that proficient with CSS yet. Basic stuff, like color and fonts, yea, but I'm really not that great with anything else. The way it is now is perfect for the way I want it.

If someone wants to do a sample CSS, go for it. I'd love to see how it's done. This just seemed the easiest way to get done what I wanted from it.
It is better to be hated for who you are then loved for who you are not.
Integra
Profile Blog Joined January 2008
Sweden5626 Posts
August 10 2011 03:48 GMT
#32
On August 10 2011 12:46 Polemos wrote:
lol - I'm really not all that proficient with CSS yet. Basic stuff, like color and fonts, yea, but I'm really not that great with anything else. The way it is now is perfect for the way I want it.

If someone wants to do a sample CSS, go for it. I'd love to see how it's done. This just seemed the easiest way to get done what I wanted from it.

See the first post, second page of this thread for a complete example.
"Dark Pleasure" | | I survived the Locust war of May 3, 2014
Prev 1 2 All
Please log in or register to reply.
Live Events Refresh
Next event in 56m
[ Submit Event ]
Live Streams
Refresh
StarCraft: Brood War
Bisu 913
firebathero 654
hero 155
Soma 147
JYJ 118
Larva 114
ggaemo 108
Dewaltoss 86
Mind 67
Sharp 52
[ Show more ]
Hyun 44
Bale 33
Purpose 26
Noble 23
soO 14
ajuk12(nOOB) 11
NotJumperer 4
League of Legends
JimRising 457
Counter-Strike
olofmeister980
byalli527
Super Smash Bros
Mew2King130
Other Games
singsing1253
ceh9615
crisheroes217
Fuzer 178
BEARDiaguz9
Organizations
Other Games
gamesdonequick533
StarCraft 2
Blizzard YouTube
StarCraft: Brood War
BSLTrovo
[ Show 16 non-featured ]
StarCraft 2
• Berry_CruncH251
• LUISG 4
• AfreecaTV YouTube
• intothetv
• Kozan
• IndyKCrew
• LaughNgamezSOOP
• Migwel
• sooper7s
StarCraft: Brood War
• iopq 6
• BSLYoutube
• STPLYoutube
• ZZZeroYoutube
Dota 2
• lizZardDota2362
• WagamamaTV239
League of Legends
• Jankos818
Upcoming Events
KCM Race Survival
56m
The PondCast
56m
OSC
56m
INu's Battles
1h 56m
Percival vs Cure
Classic vs Clem
Replay Cast
14h 56m
Escore
1d
IntoTheTV X SOOP
1d 1h
RSL Revival
1d 23h
herO vs SHIN
Clem vs Solar
Serral vs Rogue
RSL Revival
2 days
WardiTV Weekly
4 days
[ Show More ]
The Patches Monday
4 days
Sparkling Tuna Cup
5 days
PiG Sty Festival
5 days
PiGosaur Cup
5 days
Replay Cast
5 days
Kung Fu Cup
6 days
Replay Cast
6 days
Liquipedia Results

Completed

Proleague 2026-08-04
CranK Gathers Season 4: BW vs SC2 Team League
Eternal Conflict S2 Finale

Ongoing

KCM Race Survival 2026 Season 3
K-JUNGMAN
Acropolis #5
RSL Revival: Season 6
BLAST Bounty Summer 2026
BLAST Bounty Summer Qual
Stake Ranked Episode 3
XSE Pro League 2026
IEM Cologne Major 2026
Stake Ranked Episode 2
CS Asia Championships 2026

Upcoming

Escore Tournament S3: W6
Escore Tournament S3: W7
CSLAN 4
ASL Season 22
Escore Tournament S3: W8
Acropolis #5 - TRS
Blizzard Classic Cup 2026
HSC XXX
SC4ALL II: StarCraft II
Kung Fu Cup 2026 Grand Finals
PiG Sty Festival 8.0
Big Dog Cup 2026 Div 1
Thunderpick World Champ.
ESL Pro League Season 24
Stake Ranked Episode 4
Logitech G Connect 2026
SL StarSeries Fall 2026
FISSURE Playground #5
BLAST Open Fall 2026
Esports World Cup 2026
Esports World Cup 2026: LCQ
TLPD

1. ByuN
2. TY
3. Dark
4. Solar
5. Stats
6. Nerchio
7. sOs
8. soO
9. INnoVation
10. Elazer
1. Rain
2. Flash
3. EffOrt
4. Last
5. Bisu
6. Soulkey
7. Mini
8. Sharp
Sidebar Settings...

Advertising | Privacy Policy | Terms Of Use | Contact Us

Original banner artwork: Jim Warren
The contents of this webpage are copyright © 2026 TLnet. All Rights Reserved.