• Log InLog In
  • Register
Liquid`
Team Liquid Liquipedia
EST 20:53
CET 02:53
KST 10:53
  • 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
HomeStory Cup 28 - Info & Preview12Rongyi Cup S3 - Preview & Info3herO wins SC2 All-Star Invitational14SC2 All-Star Invitational: Tournament Preview5RSL Revival - 2025 Season Finals Preview8
Community News
Weekly Cups (Jan 26-Feb 1): herO, Clem, ByuN, Classic win2RSL Season 4 announced for March-April7Weekly Cups (Jan 19-25): Bunny, Trigger, MaxPax win3Weekly Cups (Jan 12-18): herO, MaxPax, Solar win0BSL Season 2025 - Full Overview and Conclusion8
StarCraft 2
General
Stellar Fest "01" Jersey Charity Auction StarCraft 2 Not at the Esports World Cup 2026 Weekly Cups (Jan 26-Feb 1): herO, Clem, ByuN, Classic win HomeStory Cup 28 - Info & Preview Weekly Cups (Jan 19-25): Bunny, Trigger, MaxPax win
Tourneys
HomeStory Cup 28 RSL Season 4 announced for March-April PIG STY FESTIVAL 7.0! (19 Feb - 1 Mar) StarCraft Evolution League (SC Evo Biweekly) $21,000 Rongyi Cup Season 3 announced (Jan 22-Feb 7)
Strategy
Custom Maps
[A] Starcraft Sound Mod
External Content
Mutation # 511 Temple of Rebirth The PondCast: SC2 News & Results Mutation # 510 Safety Violation Mutation # 509 Doomsday Report
Brood War
General
BSL Season 21 - Complete Results [ASL21] Potential Map Candidates Can someone share very abbreviated BW cliffnotes? BW General Discussion Liquipedia.net NEEDS editors for Brood War
Tourneys
[Megathread] Daily Proleagues Azhi's Colosseum - Season 2 Small VOD Thread 2.0 [BSL21] Non-Korean Championship - Starts Jan 10
Strategy
Zealot bombing is no longer popular? Simple Questions, Simple Answers Current Meta Soma's 9 hatch build from ASL Game 2
Other Games
General Games
Nintendo Switch Thread Battle Aces/David Kim RTS Megathread Path of Exile Mobile Legends: Bang Bang Beyond All Reason
Dota 2
Official 'what is Dota anymore' discussion
League of Legends
Join illminati in Luanda Angola+27 60 696 7068
Heroes of the Storm
Simple Questions, Simple Answers Heroes of the Storm 2.0
Hearthstone
Deck construction bug Heroes of StarCraft mini-set
TL Mafia
Mafia Game Mode Feedback/Ideas Vanilla Mini Mafia
Community
General
US Politics Mega-thread Things Aren’t Peaceful in Palestine European Politico-economics QA Mega-thread The Games Industry And ATVI Canadian Politics Mega-thread
Fan Clubs
The herO Fan Club! The IdrA Fan Club
Media & Entertainment
Anime Discussion Thread [Manga] One Piece
Sports
2024 - 2026 Football Thread
World Cup 2022
Tech Support
Computer Build, Upgrade & Buying Resource Thread
TL Community
The Automated Ban List
Blogs
Play, Watch, Drink: Esports …
TrAiDoS
My 2025 Magic: The Gathering…
DARKING
Life Update and thoughts.
FuDDx
How do archons sleep?
8882
Customize Sidebar...

Website Feedback

Closed Threads



Active: 1585 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
Replay Cast
00:00
Rongyi Cup S3 - Playoffs Day 2
CranKy Ducklings158
LiquipediaDiscussion
[ Submit Event ]
Live Streams
Refresh
StarCraft 2
RuFF_SC2 134
Nathanias 112
UpATreeSC 90
StarCraft: Brood War
Artosis 798
Shuttle 94
Hyuk 33
Dota 2
monkeys_forever211
NeuroSwarm112
LuMiX1
League of Legends
JimRising 400
C9.Mang0369
Counter-Strike
fl0m1269
taco 629
shahzam473
Foxcn267
Super Smash Bros
hungrybox1361
AZ_Axe125
Heroes of the Storm
Khaldor133
Other Games
summit1g8309
tarik_tv3327
Day[9].tv826
ViBE166
Maynarde121
Organizations
Other Games
gamesdonequick1183
StarCraft 2
Blizzard YouTube
StarCraft: Brood War
BSLTrovo
sctven
[ Show 17 non-featured ]
StarCraft 2
• davetesta15
• IndyKCrew
• sooper7s
• AfreecaTV YouTube
• Migwel
• intothetv
• LaughNgamezSOOP
• Kozan
StarCraft: Brood War
• RayReign 26
• STPLYoutube
• ZZZeroYoutube
• BSLYoutube
Dota 2
• masondota21926
League of Legends
• Doublelift4639
• Scarra1270
Other Games
• Day9tv826
• WagamamaTV257
Upcoming Events
The PondCast
8h 7m
WardiTV Invitational
10h 7m
Replay Cast
22h 7m
RongYI Cup
2 days
herO vs Maru
uThermal 2v2 Circuit
3 days
Replay Cast
4 days
Wardi Open
4 days
Monday Night Weeklies
4 days
Sparkling Tuna Cup
5 days
Liquipedia Results

Completed

Proleague 2026-02-04
HSC XXVIII
Underdog Cup #3

Ongoing

CSL 2025 WINTER (S19)
KCM Race Survival 2026 Season 1
Acropolis #4 - TS4
Rongyi Cup S3
Nations Cup 2026
IEM Kraków 2026
BLAST Bounty Winter 2026
BLAST Bounty Winter Qual
eXTREMESLAND 2025
SL Budapest Major 2025
ESL Impact League Season 8

Upcoming

Escore Tournament S1: W7
Escore Tournament S1: W8
Acropolis #4
IPSL Spring 2026
HSC XXIX
uThermal 2v2 2026 Main Event
Bellum Gens Elite Stara Zagora 2026
RSL Revival: Season 4
LiuLi Cup: 2025 Grand Finals
FISSURE Playground #3
IEM Rio 2026
PGL Bucharest 2026
Stake Ranked Episode 1
BLAST Open Spring 2026
ESL Pro League Season 23
ESL Pro League Season 23
PGL Cluj-Napoca 2026
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.