เนื้อหา
- สร้างตารางใน HTML
- ขั้นตอนที่ 1
- ขั้นตอนที่ 2
- ขั้นตอนที่ 3
- ขั้นตอนที่ 4
- ขั้นตอนที่ 5
- ปรับแต่งปฏิทิน
- ขั้นตอนที่ 1
- ขั้นตอนที่ 2
- thead calendar {
- ขั้นตอนที่ 3
- th ปฏิทิน
- td calendar {
- ขั้นตอนที่ 4
- td span calendar {
แม้ว่าตารางจะไม่ได้รับความนิยมในการสร้างเค้าโครงหน้าเว็บ แต่ก็ยังใช้งานได้ดีสำหรับการเขียนโค้ดปฏิทิน HTML ปฏิทินจะแสดงข้อมูลแบบตารางเมื่อมีการจัดระเบียบในตารางของวันที่โดยมีคอลัมน์ที่ตั้งชื่อเช่นพร้อมกับวันในสัปดาห์ โค้ด CSS พิเศษจะสร้างตารางที่น่าเบื่อพร้อมชื่อและตัวเลขให้เหมือนกับปฏิทิน เนื่องจากกิจกรรมในปฏิทินจำเป็นต้องมีพื้นที่ทั้งสำหรับจำนวนวันที่และสำหรับกิจกรรมจึงจำเป็นต้องใช้ CSS เพื่อจัดรูปแบบวันที่ในลักษณะที่ช่วยให้ข้อมูลทั้งสองส่วนสามารถอ่านได้
สร้างตารางใน HTML
ขั้นตอนที่ 1
สร้างตารางเพื่อจัดโครงสร้างปฏิทิน ตารางนี้ต้องการส่วนหัวที่มีเซลล์เจ็ดเซลล์สำหรับแต่ละวันในสัปดาห์ นอกจากนี้ยังจำเป็นต้องสร้างเซลล์ตารางปกติหกแถว คัดลอกและวางข้อความที่ตัดตอนมาในหน้าเว็บด้วยความช่วยเหลือของ Notepad หรือโปรแกรมแก้ไขโค้ด
| วันอาทิตย์ | วันจันทร์ | วันอังคาร | วันพุธ | วันพฤหัสบดี | วันศุกร์ | วันเสาร์ |
|---|
รหัสนี้จะสร้างตารางและชื่อเรื่อง ตารางใช้ชื่อประจำตัวที่เรียกว่า "ปฏิทิน" ในกรณีที่เว็บไซต์ใช้ตารางในหน้าอื่น
ขั้นตอนที่ 2
เพิ่มคู่ของแท็กร่างกายด้านล่างแท็ก "":
ขั้นตอนที่ 3
คัดลอกรหัสต่อไปนี้และวางระหว่าง "
" หกครั้ง:รหัสนี้จะสร้างแต่ละแถวโดยมีเซลล์เจ็ดเซลล์ดังนั้นเมื่อเพิ่มหกเซลล์ปฏิทินจะมีช่องว่างข้อมูลทั้งหมดที่คุณต้องการสำหรับทุกเดือนของปี
ขั้นตอนที่ 4
เพิ่มวันที่ในปฏิทินตามเดือนที่คุณต้องการแสดง ดูปฏิทินจริงและระวังอย่าข้ามหรือซ้ำวันที่ ใส่แท็ก "" ในแต่ละวันเพื่อให้คุณสามารถปรับแต่งตัวเลขได้ในภายหลัง:
ขั้นตอนที่ 5
สังเกตเหตุการณ์ในเซลล์ที่มีวันที่ที่เกี่ยวข้อง กิจกรรมต้องอยู่นอกแท็ก "" แต่อยู่ในแท็ก "
’:
ปาร์ตี้ฮาโลวีน!
วันสุดท้ายสำหรับการลงทะเบียน
ปรับแต่งปฏิทิน
ขั้นตอนที่ 1
ค้นหา "
โครงร่างเป็นทางเลือก แต่เป็นวิธีที่เหมาะสมที่สุดในการเพิ่มเส้นขอบให้กับตารางบนหน้าเว็บปัจจุบัน
ขั้นตอนที่ 2
กำหนดชื่อตารางด้วยสีสำหรับตัวอักษรและอีกสีหนึ่งสำหรับพื้นหลัง:
thead calendar {
สี: #ffffff; พื้นหลังสี: darkblue; น้ำหนักตัวอักษร: ตัวหนา; }
เป็นไปได้ที่จะใช้รหัสฐานสิบหกหรือชื่อของสี ชื่อนี้จะแสดงข้อความสีขาวบนพื้นสีน้ำเงินกรมท่า
ขั้นตอนที่ 3
เติมเส้นขอบความกว้างและตำแหน่งที่สัมพันธ์กับเซลล์ตาราง:
th ปฏิทิน
td calendar {
ช่องว่างภายใน: 20px; เส้นขอบ: 1px ทึบสีดำ; ความกว้าง: 100px; ตำแหน่ง: ญาติ; }
ตำแหน่งสัมพัทธ์ช่วยให้โปรแกรมเมอร์สามารถวางวันที่ในรูปแบบของตัวเลขที่มุมของเซลล์ตารางได้ในภายหลัง อย่ากำหนดความสูงเนื่องจากจะ จำกัด จำนวนข้อความที่คุณสามารถเพิ่มในวันที่ใดก็ได้
ขั้นตอนที่ 4
สร้างตัวเลขโดยใช้การเติมสีพื้นหลังและการวางตำแหน่งที่แน่นอน:
td span calendar {
น้ำหนักตัวอักษร: ตัวหนา; ตำแหน่ง: แน่นอน; ด้านล่าง: 0; ขวา: 0; แสดง: บล็อก; ช่องว่างภายใน: 5px; สีพื้นหลัง: #eeeeee; }
คุณต้องใส่ "display: block" เพื่อให้แท็ก "" ทำหน้าที่เป็นช่องบนหน้าเว็บมิฉะนั้นคุณจะไม่สามารถเติมเต็มได้ โค้ดตัวอย่างนี้สร้างกล่องสีเทาจาง ๆ ที่มุมล่างซ้ายของช่องว่างแต่ละวันโดยแสดงหมายเลขวันที่