สร้าง Tableless Layout ด้วย div และ stylesheet

อยู่ในประเภท: web design |

โพสเมื่อ June 6th, 2008 โดย Bird

การออกแบบเว็บในยุคก่อน(ปัจจุบันก็ยังใช้กันอยู่)จะใช้ <table> ในการวางเลเอาท์ ดังตัวอย่างต่อไปนี้

<html>
<head>
<title> my website </title>
<meta name="keywords" content="joe bloggs’ website, site, pages,">
<meta name="author" content="joe bloggs">
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<table id="main">
<tr><td>
<img src="images/bla.gif" align="left" alt="layout image 1"><br />
</td></tr>
<tr><td>
<h1>Welcome to my website</h1>
<p>This is my wonderful website with funky content and groovy images!</p>
</td></tr>
</table>
</body>
</html>

ซึ่งผิดวัตถุประสงค์ในการใช้งาน <table> เพราะ <table> ควรนำไปใช้แสดงข้อมูลในรูปตารางมากกว่าที่จะนำมาใช้ทำเลเอาท์ในเมื่อไม่ใช้ <table> แล้วเราจะใช้อะไรวางเลเอาท์ล่ะ? ทางเลือกก็คือ การออกแบบเว็บไซท์แบบ Tableless ชื่อก็บอกอยู่แล้วว่าไร้ตาราง คือ ใช้แท็ก <div> แทน <table> และใช้ภาษา style sheet เช่น css หรือ Cascading Style Sheets ในการจัดการกับแท็ก <div> เช่น จัดตำแหน่ง ขนาด สี เป็นต้น

ตัวอย่างต่อไปเป็นการนำตัวอย่างข้างบนมาแปลงเป็น tableless โดยการใส่ <div> แทน <table>

<html>
<head>
<title> my website </title>
<meta name="keywords" content="joe bloggs’ website, site, pages,">
<meta name="author" content="joe bloggs">
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="image">
<img src="images/bla.gif" align="left" alt="layout image 1"><br />
</div>
<div id="main">
<h1>Welcome to my website</h1>
<p>This is my wonderful website with funky content and groovy images!</p>
</div>
</body>
</html>

เราสามารถปรับแต่ง <div> ได้โดยใช้ css แต่เราจะต้องระบุ id หรือ class ให้กับ <div> ด้วย เพื่อใช้ในการอ้างถึงใน css

ตัวอย่างการใช้ id

#image {
float: left;
width: 500px;
}

หรือใช้ class

.image {
float: left;
width: 500px;
}

การเลือกใช้ก็แล้วแต่วัตถุประสงค์ในการใช้งาน ถ้ามี tag มากกว่าหนึ่ง tag ที่ใช้ ชื่อในการอ้างอิงว่า image ก็ควรใช้ class แต่ถ้ามีอยู่ tag เดียวที่ใช้ชื่อในการอ้างอิงว่า image ก็ใช้ id ได้

แล้ว Tableless มันดียังไง?
Tableless ช่วยลดจำนวน HTML tags ลงได้เป็นจำนวนมากเปรียบเทียบได้จากสองตัวอย่างข้างต้นตัวอย่างแรกใช้แท็กในการแสดงรูปดังนี้

<tr><td>
<img src="images/bla.gif" align="left" alt="layout image 1"><br />
</td></tr>

แต่ตัวอย่างที่สองใช้

<div id="image">
<img src="images/bla.gif" align="left" alt="layout image 1"><br />
</div>

ยิ่งถ้าเป็นเลเอาท์ที่มีความซับซ้อนมากๆ การใช้ <table> ก็จะยิ่งใช้แท็กจำนวนมากและยังทำให้สับสน ยากต่อการปรับปรุงแก้ไข และที่สำคัญ Tableless ช่วยลดเวลาในการโหลดหน้าเว็บ

Tableless Templates

เราได้เห็นกันแล้วว่า <div> มีความสำคัญต่อ css ซึ่งเรียกได้ว่าเป็นกล่องวิเศษเลยทีเดียว ต่อไปเราจะออกแบบเทมเพลทโดยใช้หลักการ tableless ให้ดูตัวอย่างเลเอาท์ที่ใช้ตารางต่อไปนี้ก่อน

header image
content column	linkscolumn

หลายคนคิดว่าเป็นไปไม่ได้ที่จะใช้ css และ <div> แทน <table> ดังนั้นเราก็มาลองใส่แท็ก <div> เข้าไปในหน้าเว็บ 3 ตัว แล้วดูว่ามันจะออกมาเหมือนตัวอย่างข้างบนหรือไม่ คำตอบก็คือ ไม่เหมือนแน่นอน เพราะ <div> มีลักษณะเป็น block ทำให้ flow ของมันต้องเรียงลำดับกันลงมา ดังนั้นเราต้องใช้ css มาจัดการมันซะ และคุณจะต้องมีความรู้เกี่ยวกับ css มาบ้างแล้วถึงจะเข้าใจการทำ tableless ได้ โดยเฉพาะอย่างยิ่ง เรื่อง float

อย่างแรกเลยที่จะต้องรู้เกี่ยวกับ float คือเมื่อเรากำหนดให้ <div> float มันก็จะล่องลอยขึ้นไปข้างบน ไปจนชิดขอบของกรอบที่ครอบมันอยู่ (จะลอยไปติดขอบด้านไหนก็แล้วแต่ว่ากำหนดเป็น float:left หรือ float:right) ดังตัวอย่างด้านล่าง <div> ที่ float แทนด้วยสีน้ำเงิน

ตัวอย่างการออกแบบนี้จะจัดให้ทุกองค์ประกอบ(<div>ต่าง ๆ)อยู่ตรงกลางเพจ หากจะทำเช่นนี้ได้เราจะต้องสร้าง <div> ขึ้นมาตัวนึงเอาไว้ครอบ <div> ทั้งหมดในเพจ แล้วจัดตำแหน่งให้อยู่ตรงกลางเพจ ดังนี้

<body>
<div id="container">
</div>
</body>

จากนั้นกำหนด <div id=”container”> ให้อยู่ตรงกลางเพจด้วยคำสั่ง css

body {
text-align: center; /* center things in pre-IE6 */
}
#container {
margin: 35px auto;
width: 500px;
text-align: left;
}

เพจที่เราสร้างจะออกมามีรูปร่างหน้าตาดังรูปนี้ container แทนด้วยสีน้ำเงิน

ต่อไปเพิ่ม <div> เข้าไปใน container เพื่อให้เป็นส่วนหัวของเพจ เพื่อให้เหมือนตัวอย่างเพจที่สร้างด้วย table ที่ได้กล่าวไว้ ส่วนนี้เป็นส่วนที่ง่ายที่สุดเพราะแค่ใส่ <div> เข้าไปแล้วกำหนด id ให้เป็น “header”

<body>
<div id="container">
<div id="header"> </div>
</div>
</body>

สำหรับคอลัมน์ที่เหลือให้ใส่ <div> เข้าไปอีกสองอัน ดังตัวอย่างนี้

<body>
<div id="container">
<div id="header"> </div>
<div id="content"> blabla content </div>
<div id="sidebar"> blabla links </div>
</div>
</body>

จากที่เราได้กำหนดให้ container มีความกว้าง 500 พิกเซล ดังนั้นความกว้างของ 2 คอลัมน์ที่เราเพิ่งใส่เข้าไปจะต้องรวมกันแล้วไม่เกิน 500 พิกเซล ในที่นี้จะกำหนดให้ content กว้าง 380 พิกเซล ส่วนที่เหลือ 120 พิกเซลเป็นความกว้างของ sidebar นำค่าที่คำนวณได้ไปกำหนดให้กับ css ดังนี้

#container {
margin: 35px auto;
width: 500px;
}
#header {
width: auto;
}
#content {
width: 380px;
}
#sidebar {
width: 120px;
}

เพจที่ได้จะออกมาเป็นดังรูปต่อไปนี้ (สีแดงคือ header สีเขียวคือ content สีชมพูคือ sidebar)

เราต้องกำหนด float ให้แต่ละคอลัมน์เพื่อให้ คอลัมน์อยู่ในตำแหน่งที่ถูกต้อง ดังนี้

#content {
float: left;
width: 380px;
}
#sidebar {
float: right;
width: 120px;
}

ในที่สุดแต่ละส่วนก็อยู่ในตำแหน่งที่ถูกต้องดังรูป

คอลัมน์ทั้งสองจะอยู่คนละด้านกันและจะไม่หลุดออกจากกรอบ(container) แต่ถ้าเรากำหนด padding, margin หรือ border ให้แต่ละคอลัมน์เราจะต้องนำค่าที่กำหนดให้กับ padding, margin หรือ border มาลบออกจากความกว้างคอลัมน์ที่เรากำหนด padding, margin หรือ border

ปัญหาที่พบ คือ บางเบราเซอร์ไม่แสดงพื้นหลังที่ <div> ที่กำหนด float ไว้ วิธีแก้คือ เพิ่ม <div> ก่อนที่จะปิดแท็ก container ซึ่งก็คือ footer นั่นเอง