Css จัดตารางไม่ให้มีเส้นขอบ ต้องทำไงค่ะ

ioff · 06 สิงหาคม 2009, 21:51:56

คือ ติดปัญหาอยู่ดังในรูปนี้ค่ะ

รูปตัดเป็นชิ้นๆ ใช้ตารางในการจัด คอลัมล์นี้อ่ะค่ะ คือยังไม่ค่อยชำนาญสไตล์ที่ไม่ใช้ตาราง

รบกวน ช่วยแนะนำทีนะค่ะ ว่า จ้องทำอย่างไร ให้ ตารางไม่มีเส้นกรอบแบบนี้ เพราะมันทำให้รูปมีรอยแยกอ่ะค่ะ

แต่ว่า เป็น เฉพาะใน Chrome Firefox ค่ะ ส่วน IE ไม่มีรอยแตกใดๆ เลย ค่ะ

g-ji · 06 สิงหาคม 2009, 21:58:54

เขียน css

<style type="text/css">
* table,* th,* td{bordor:none;}
</style>

เพิ่มไปแค่นี้น่าจะเรียบร้อยนะ

ttong · 06 สิงหาคม 2009, 21:59:03

โค้ด เลือก

table{
border-collapse:collapse;
}

ลองดูนะครับ

sssii · 06 สิงหาคม 2009, 22:01:11

มาตอบไม่ทัน แต่ว่า ชอบแอบรักคนผมหยิกอ่ะ

WPDSign · 06 สิงหาคม 2009, 22:28:28

กำลังศึกษา css อยู่พอดี ขอบคุณครับ

ขอถามต่นิด ครับ

ถ้าต้องการสร้างตารางโดยใช้ css ต้องเขียนแบบไหนครับ
เช่นตาราง 10x10 ครับ

sssii · 06 สิงหาคม 2009, 22:30:58

http://www.thaicss.com/

g-ji · 06 สิงหาคม 2009, 22:31:06

อ้างถึงจาก: doteenee.com ใน 06 สิงหาคม 2009, 22:28:28
กำลังศึกษา css อยู่พอดี ขอบคุณครับ

ขอถามต่นิด ครับ

ถ้าต้องการสร้างตารางโดยใช้ css ต้องเขียนแบบไหนครับ
เช่นตาราง 10x10 ครับ

CSS มันแค่ ตกแต่งหน้า เอกสารอ่ะ มันใช้ทำ ตารางไม่ได้

อ่า เว็บ ข้างบนนั้น เขาไป HTML5 กันแล้ว

(จี้ก็พอเขียนได้นะ)

มึนๆ ดีเหมือนกัน

FortuneDice · 06 สิงหาคม 2009, 22:33:07

เนียนได้อยู่นาตารางอ่ะ
<div style="width:10px; height:10px;">

WPDSign · 06 สิงหาคม 2009, 22:33:40

อ้างถึงจาก: g-ji ใน 06 สิงหาคม 2009, 22:31:06
อ้างถึงจาก: doteenee.com ใน 06 สิงหาคม 2009, 22:28:28
กำลังศึกษา css อยู่พอดี ขอบคุณครับ

ขอถามต่นิด ครับ

ถ้าต้องการสร้างตารางโดยใช้ css ต้องเขียนแบบไหนครับ
เช่นตาราง 10x10 ครับ

CSS มันแค่ ตกแต่งหน้า เอกสารอ่ะ มันใช้ทำ ตารางไม่ได้

ขอบคุณครับ คุณ g-ji
ผมไม่รู้จริงๆ

ที่ผมเขียนเว็บอยู่ตอนนนี้ tag ขยะเยอะมากกำลังหัดเขียนแบบใหม่
ขอบเคณจ้าของกระทู้ครับ

FortuneDice · 06 สิงหาคม 2009, 22:35:20

ฝึก float, padding, margin, display ไว้เนียนสร้างตารางได้หลายแบบเลยอ่ะ ^ ^
(จริงๆ มันคือ layout ง่ะ แต่การแสดงผลมันก็คือๆ กันแหละ)

WPDSign · 06 สิงหาคม 2009, 22:38:24

อ้างถึงจาก: FortuneDice ใน 06 สิงหาคม 2009, 22:35:20
ฝึก float, padding, margin, display ไว้เนียนสร้างตารางได้หลายแบบเลยอ่ะ ^ ^
(จริงๆ มันคือ layout ง่ะ แต่การแสดงผลมันก็คือๆ กันแหละ)

+1 ครับ พอแนะนำตัวสักตัวอย่างไม่ครับ

ผมโหลด template มาแก้ งง ไม่เคยเขียน

g-ji · 06 สิงหาคม 2009, 22:43:26

ถ้าให้เอา element อื่น มาทำเป็น table จี้ก็ทำได้นะ

แต่จะนั่งปวดหัว พิมพ์ CSS + Hack เป็น 20~30 บรรทัดไปทำไม

ในเมื่อมันมี ตารางให้ใช้

มันไม่ได้ห้ามใช้นี่นา

ตาราง ควรจะใช้ก็ต่อเมื่อต้องนำเสนอข้อมูลที่เป็น ตารางข้อมูล (น่าจะเคยเห็นนะ ตารางข้อมูลอ่ะ มีหัวข้อใหญ่ แล้วก็ หัวข้อของแต่ละ คอลัมน์ แล้วก็ หัวข้อของแต่ละแถว)

ถ้าเขียนให้มันถูกหลัก ใช้ scope="row" หรือ scope="col" บอกบอทว่า ตารางนี้ อ่านยังไงก็พอแล้ว บอทมันเข้าใจ -*-

อ่านเป็นคอลัมน์ ก็ scope="col" อ่านเป็นแถว ก็ scope="row"

อ่านบนลงล่างก่อนแล้ว ซ้ายไปขวา ก็ col ก่อน ตามด้วย row แล้วบอกทิศทางการอ่านด้วย dir="ltr" ก็จบ

พวกที่ไม่ใช่คนมันก็อ่านรู้เรื่องแล้ว...

WPDSign · 06 สิงหาคม 2009, 22:51:53

+1 Thanks ครับ

FortuneDice · 06 สิงหาคม 2009, 23:30:09

อ่ะ ตัวอย่าง อันนี้แบบลวกๆ
2 แถว 2 คอลัมน์
ถ้าอยากทำเป็นหลายๆ รูปแบบก็ศึกษาตามที่บอก แต่จริงๆ แล้วถ้าเป็นงานตารางใช้ตารางจะดีกว่านะ
^ ^ CSS นี่เอาไว้เนียนตอนเขียนตารางไม่ได้ก็พอ

==================

<head>
<style>

.table{width:240px; height:240px; background:black; text-align:center;}
.clear{float:clear;}
.t1{ width:120px; height:120px; background:yellow; float:left; }
.t2{ width:120px; height:120px; background:green; float:left; }
.t3{ width:120px; height:120px; background:blue; float:left;}
.t4{ width:120px; height:120px; background:red; float:left;}
</style>
</head>
<body>

<div class="table">

<div class="clear">
<div class="t1">แถว 1 คอลัมน์ 1</div>
<div class="t2">แถว 1 คอลัมน์ 2</div>
</div>

<div class="t3">แถว 2 คอลัมน์ 1</div>
<div class="t4">แถว 2 คอลัมน์ 2</div>
</div>

</body>

=====
ลองเซฟเป็นไฟล์ .html แล้วเปิดดูเองล่ะกัน

WPDSign · 06 สิงหาคม 2009, 23:32:11

ขอบคุณครับ +1 แต่ให้ไม่ได้แล้ว