ปรับ table ใน div ยังไงครับ [CSS]

เริ่มโดย ru, 21 มกราคม 2010, 12:54:04

หัวข้อก่อนหน้า - หัวข้อถัดไป

0 สมาชิก และ 1 ผู้มาเยือน กำลังดูหัวข้อนี้

พิมพ์
ลง หน้า1
การกระทำของผู้ใช้

ru

21 มกราคม 2010, 12:54:04
รบกวนหลายครั้งแล้ว ผมพยายามลองหาข้อมูล ลองปรับเองดูแล้วมันก็ไม่ได้สักที
เลยมาขอความช่วยเหลือครับ ปัญหาคือว่า table มันไม่สามารถปรับค่าความกว้างได้ครับ ผมจับ table มาอยู่ใน div ครับ
รบกวนแนะนำทีนะครับ



code ครับ

อ้างถึง<div id="history"><table cellspacing="0" cellpadding="0" width="700"><tr><td width="190"><img align="left" src="รูป" alt="" title="img-1" width="190" height="107" /></td><td width="400"><p align="left">โรงเรียนปรินส์รอยแยลส์วิทยาลัย ตั้งอยู่ ณ ถนนแก้วนวรัฐ ตำบลวัดเกต อำเภอ เมือง เชียงใหม่ เป็นโรงเรียนแบบตะวันตกสำหรับเด็กชายแห่งแรกในล้านนา ก่อตั้งเมื่อวันที่ 19 มีนาคม ค.ศ. 1887 โดยศาสนาจารย์เดวิด กอร์มเลย์ คอลลินส์ มิชชันนารีคณะอเมริกันเพรสไบทีเรียน โรงเรียนนี้ตั้งอยู่ทางฝั่งตะวันตกของแม่น้ำปิง บริเวณวังสิงห์คำ เรียกว่า "Chiengmai Boys' School" หรือเป็นที่รู้จักกันในนามโรงเรียนชายวังสิงห์คำ ทำการสอนโดยใช้ภาษาล้านนาเป็นหลัก มีการเรียนพระคัมภีร์ควบคู่กันไป มีครูรุ่นแรกประกอบด้วย ครูโอ๊ะ ครูบุญทา ครูแดง และครูน้อยพรหม</p></td></tr></table></div>

********************************

#history {width: 720px; float:left;}

IPTM04

#1
21 มกราคม 2010, 13:34:18
ผมลอง ดูแล้ว  ทั้ง FF และ IE มันได้นะครับ แต่ถ้าของคุณไม่ได้ ลอง <table cellspacing="0" cellpadding="0" width="700" style="table-layout:fixed;"> ดูครับ ไม่ได้บอกนะครับด้วยช่วยหาให้
รับโพสงาน นะครับ ติดต่อได้
[direct=http://www.kaicard.com]ขายบัตรเงินสด บัตรเติมเงิน[/direct] [direct=http://www.lotusbedding.com/TH/imp_pop_art.php]ผ้าปูที่นอน ลาย การ์ตูน[/direct]

cowboyIT

#2
21 มกราคม 2010, 13:47:23 แก้ไขล่าสุด: 21 มกราคม 2010, 13:49:06 โดย cowboyIT
ใน table ลองเพิ่มพวก align="left" valign="top" ดูครับ

ผมลองเปิดใน ff ก่ะ ie6 ก็แสดงผลโออยู่นะ
อ้างถึง<table cellspacing="0" cellpadding="0" width="700"><tr><td width="194" height="152" align="left" valign="top"><img align="left" src="รูป" alt="" title="img-1" width="190" height="107" /></td><td width="504" align="left" valign="top"><p align="left">โรงเรียนปรินส์รอยแยลส์วิทยาลัย ตั้งอยู่ ณ ถนนแก้วนวรัฐ ตำบลวัดเกต อำเภอ เมือง เชียงใหม่ เป็นโรงเรียนแบบตะวันตกสำหรับเด็กชายแห่งแรกในล้านนา ก่อตั้งเมื่อวันที่ 19 มีนาคม ค.ศ. 1887 โดยศาสนาจารย์เดวิด กอร์มเลย์ คอลลินส์ มิชชันนารีคณะอเมริกันเพรสไบทีเรียน โรงเรียนนี้ตั้งอยู่ทางฝั่งตะวันตกของแม่น้ำปิง บริเวณวังสิงห์คำ เรียกว่า "Chiengmai Boys' School" หรือเป็นที่รู้จักกันในนามโรงเรียนชายวังสิงห์คำ ทำการสอนโดยใช้ภาษาล้านนาเป็นหลัก มีการเรียนพระคัมภีร์ควบคู่กันไป มีครูรุ่นแรกประกอบด้วย ครูโอ๊ะ ครูบุญทา ครูแดง และครูน้อยพรหม</p></td></tr></table>

ano

#3
21 มกราคม 2010, 13:50:12
เป็นสังคมแห่งการมีน้ำใจจริง ๆ บอร์ดนี้
น่านับถือมากครับ..

สนับสนุนคนไทย(และคนทั่วโลก) มีน้ำใจที่ดีต่อกัน

:wanwan017:
gg

g-ji

#4
21 มกราคม 2010, 14:00:24 แก้ไขล่าสุด: 21 มกราคม 2010, 14:12:27 โดย g-ji
แล้วไหงต้องทำเป็น ตาราง อยู่ใน div หว่า  :wanwan015:

อยากให้มันเป็น

---รูป----//ข้อความ
---รูป----//ข้อความ
---รูป----//ข้อความ
//////////ข้อความ
ข้อความ ข้อความ

แบบนี้ป่าว ?

ถ้าจะเอาแบบนี้ ไม่ต้อง ใช้ ตารางก็ได้

โค้ด เลือก

<head>
<title>Div</title>
<style type="text/css">
#history {width: 720px; float:left;}
#history img:first-child{width:190px;height:auto;float:left;margin: 1%;padding:5px;border:#ddd solid 1px;}
#history p{text-align:left;line-height:1.2em;text-indent:20px;border:#f00 solid 1px;}
/* ถ้าจะให้สวยกว่าเอาแบบนี้
#history p{text-align:justify;line-height:1.2em;text-indent:1%;}
ข้อความจะชิดขอบ และ บรรทัดแรก จะเว้นระยะ จากขอบซ้าย ไปทางขวา 1% (ประมาณ) ... text-indent คือคำสั่ง ย่อหน้า
*/
</style>
</head>
<body>
<div id="history">
<img src="รูป" alt="รูป" />
<p>โรงเรียนปรินส์รอยแยลส์วิทยาลัย ตั้งอยู่ ณ ถนนแก้วนวรัฐ ตำบลวัดเกต อำเภอ เมือง เชียงใหม่ เป็นโรงเรียนแบบตะวันตกสำหรับเด็กชายแห่งแรกในล้านนา ก่อตั้งเมื่อวันที่ 19 มีนาคม ค.ศ. 1887 โดยศาสนาจารย์เดวิด กอร์มเลย์ คอลลินส์ มิชชันนารีคณะอเมริกันเพรสไบทีเรียน โรงเรียนนี้ตั้งอยู่ทางฝั่งตะวันตกของแม่น้ำปิง บริเวณวังสิงห์คำ เรียกว่า "Chiengmai Boys' School" หรือเป็นที่รู้จักกันในนามโรงเรียนชายวังสิงห์คำ ทำการสอนโดยใช้ภาษาล้านนาเป็นหลัก มีการเรียนพระคัมภีร์ควบคู่กันไป มีครูรุ่นแรกประกอบด้วย ครูโอ๊ะ ครูบุญทา ครูแดง และครูน้อยพรหม</p>
</div>
</body>


ภาพตัวอย่าง div base (กดดูภาพใหญ่)


แ่ต่ถ้าต้องใช้ตารางจริงๆ ก็

โค้ด เลือก

<head>
<title>test</title>
<style type="text/css">
#history {width: 720px; float:left;}
#history table{width:700;margin:1% auto;}
.table td:first-child{width:190px;text-align:center;vertical-align:middle;border:#ddd solid 1px;}
.table td:nth-child(2){width:400px;text-align:justify;line-height:1.2em;text-indent:20px;border:#f00 solid 1px;}
</style>
</head>
<body>
<div id="history">
<table class="table">
<tbody>
<tr>
<td><img src="รูป" alt="รูป" /></td>
<td><p>โรงเรียนปรินส์รอยแยลส์วิทยาลัย ตั้งอยู่ ณ ถนนแก้วนวรัฐ ตำบลวัดเกต อำเภอ เมือง เชียงใหม่ เป็นโรงเรียนแบบตะวันตกสำหรับเด็กชายแห่งแรกในล้านนา ก่อตั้งเมื่อวันที่ 19 มีนาคม ค.ศ. 1887 โดยศาสนาจารย์เดวิด กอร์มเลย์ คอลลินส์ มิชชันนารีคณะอเมริกันเพรสไบทีเรียน โรงเรียนนี้ตั้งอยู่ทางฝั่งตะวันตกของแม่น้ำปิง บริเวณวังสิงห์คำ เรียกว่า "Chiengmai Boys' School" หรือเป็นที่รู้จักกันในนามโรงเรียนชายวังสิงห์คำ ทำการสอนโดยใช้ภาษาล้านนาเป็นหลัก มีการเรียนพระคัมภีร์ควบคู่กันไป มีครูรุ่นแรกประกอบด้วย ครูโอ๊ะ ครูบุญทา ครูแดง และครูน้อยพรหม</p></td>
</tr>
</tbody>
</table>
</div>
</body>


แก้โค้ดเป็นแบบข้างบน แล้วกำหนด CSS อย่างเดียว

จากโค้ด ตารางมันจะออกมาเป็น ตามรูป



อธิบายโค้ดส่วนของ ตารางเพิ่มเติม

โค้ด เลือก

<style type="text/css">

#history {width: 720px; float:left;}

#history table{width:700;margin:1% auto;}

.table td:first-child{width:190px;text-align:center;vertical-align:middle;border:#ddd solid 1px;}


.table td:nth-child(2){width:400px;text-align:justify;line-height:1.2em;text-indent:20px;border:#f00 solid 1px;}
</style>



จะเห็นว่า property ของ

.table td:first-child มันมี vertical-align:middle; ด้วย คิดว่าหลายๆ คนอาจจะไม่รู้จัก มันคือ การจัดตำแหน่งของ รูป ว่าจะให้อยู่ระดับใด ของข้อความ ค่าที่สามารถตั้งได้คือ

vertical-align:top; /* สูงสุดเท่าที่จะสูงได้*/
vertical-align:text-top;/* สูงกว่า text*/
vertical-align:middle; /* จัดให้อยู่ตรงกลาง ของ บรรทัด*/
vertical-align:bottom; /* จัดให้อยู่ใต้ text */
vertical-align:sub;/* จัดให้เป็น ซับสคริปท์ (ตัวห้อย)*/
vertical-align:super; /*จัดให้เป็น ซุปเปอร์สคริปท์ (ตัวยก)*/
vertical-align:baseline; /*ระดับเดียวกับข้อความ ค่านี้เป็น default*/

แล้วก็ยังมี
length ใช้เป็นตัวเลข 0~x และ -1~-x (บน/ล่าง)
% ใช้เป็น 1%~x% และ -1%~-x% (บน/ล่าง)
inherit ใช้ค่าจาก ตัวที่ครอบมันอยู่ (ไม่ต้องใช้มันหรอก-*-)

ในกรณีนี้ จี้เอาไปใช้กับ td ทำให้ ตัวมันอยู่ตรงกลางเสมอ เพิ่มอะไรเข้าไปมันก็จะอยู่ตรงกลางเสมอ (ลอง copy โค้ดไปเล่นดู)

ปล. IE 6 7 ไม่ซัพพอร์ท  :-X ขี้เกียจแฮค อะ -*-

ru

#5
21 มกราคม 2010, 14:03:39
ตอนแรกใช้ div แหละครับ พี่จี
สักพัก div มันเริ่มเยอะ อีรุงตุงนังหมด กำหนดคลาสกันให้วุ่น
เดี๋ยวของลองทำตามคำแนะนำก่อนครับ ขอบคุณทุกความเห็นครับ

g-ji

#6
21 มกราคม 2010, 14:16:13
กำหนด คลาสเดียวไปเลยก็ได้ อย่าง

<img src="รูป" alt="รูป" class="left" />

เวลาสั่งใน CSS ก็

img[class="left"]{width:190px;height:auto;float:left;margin: 1%;padding:5px;border:#ddd solid 1px;}

แบบเนี่ย ทุกรูปที่มีคลาส left มันจะ float:left หมด

class หมายถึง ประเภท

ถ้า ต้องการให้ัมันเหมือนกัน เราก็จัดให้มันเป็น "ประเภท" เดียวกันให้หมด

พิมพ์
ขึ้น หน้า1
การกระทำของผู้ใช้