ស្វែងយល់ពីរបៀបបង្កើតស៊ុមតារាង CSS ក្នុងរយៈពេលត្រឹមតែ 5 នាទីប៉ុណ្ណោះ
អ្នកប្រហែលជាបានលឺថាតារាង CSS និង HTML មិនលាយ។ នេះមិនមែនជាការពិតទេ។ បាទ / ចាសការប្រើតារាង HTML សម្រាប់ប្លង់គឺលែងជាការអនុវត្តន៍រចនាគេហទំព័រដ៏ល្អបំផុតដោយត្រូវបានជំនួសរចនាប័ទ្ម CSS ប៉ុន្តែតារាងនៅតែជាការសម្គាល់ត្រឹមត្រូវដើម្បីប្រើដើម្បីបន្ថែមទិន្នន័យផ្ទាំងទស្សនាទៅគេហទំព័រ។
ជាអកុសលដោយសារតែអ្នកឯកទេសខាងគេហទំព័រជាច្រើនបានងាកចេញពីតុដែលគិតថាពួកគេមានជាតិពុលអ្នកជំនាញជាច្រើននាក់មានបទពិសោធន៍តិចតួចដែលធ្វើការជាមួយធាតុអាកាសទូទៅនេះនិងការតស៊ូនៅពេលដែលពួកគេត្រូវដោះស្រាយវានៅលើគេហទំព័រ។ ឧទាហរណ៍ប្រសិនបើអ្នកមានតារាងនៅលើទំព័រហើយអ្នកចង់បន្ថែមបន្ទាត់ខាងក្នុងទៅក្រឡាតារាង។
ស៊ុមតារាង CSS
នៅពេលអ្នកប្រើ CSS ដើម្បីបន្ថែមស៊ុមទៅតារាងវាគ្រាន់តែបន្ថែមស៊ុមជុំវិញខាងក្រៅនៃតារាង។ ប្រសិនបើអ្នកចង់បន្ថែមបន្ទាត់ខាងក្នុងទៅក្រឡានីមួយៗនៅក្នុងតារាងនោះអ្នកត្រូវបន្ថែមស៊ុមទៅផ្នែកខាងក្នុងរបស់ CSS ។ អ្នកក៏អាចប្រើស្លាក HR ដើម្បីបន្ថែមបន្ទាត់ក្នុងក្រឡានីមួយៗ។
ក្នុងគោលបំណងដើម្បីអនុវត្តរចនាប័ទ្មដែលបានគ្របដណ្តប់នៅក្នុងអត្ថបទនេះអ្នកពិតជាគួរមាន តារាងមួយ នៅលើទំព័របណ្តាញរបស់អ្នក។ បន្ទាប់មកអ្នកគួរតែបង្កើតសន្លឹករចនាប័ទ្មមួយជាតារាងរចនាបថ ខាងក្នុង នៅក្នុងក្បាលឯកសាររបស់អ្នក (អ្នកទំនងជានឹងធ្វើដូច្នេះប្រសិនបើ "គេហទំព័រ" របស់អ្នកគឺជាទំព័រតែមួយ) ឬភ្ជាប់ទៅឯកសារជា សន្លឹករចនាប័ទ្មខាងក្រៅ (នេះគឺជាអ្វីដែលអ្នក នឹងធ្វើប្រសិនបើគេហទំព័ររបស់អ្នកមានទំព័រច្រើន - អនុញ្ញាតឱ្យអ្នករចនាទំព័រទាំងអស់ពីសន្លឹកខាងក្រៅ) ។ អ្នកនឹងដាក់រចនាប័ទ្មដើម្បីបន្ថែមបន្ទាត់ផ្ទៃក្នុងនៅក្នុងសន្លឹករចនាប័ទ្មនោះ។
មុនពេលអ្នកចាប់ផ្ដើម
ដំបូងអ្នកត្រូវសម្រេចចិត្តថាតើកន្លែងណាដែលអ្នកចង់ឱ្យបន្ទាត់លេចឡើងក្នុងតារាងរបស់អ្នក។ អ្នកមានជម្រើសជាច្រើនរួមមាន:
- ជុំវិញក្រឡាទាំងអស់ដើម្បីបង្កើតក្រឡាចត្រង្គ។
- កំណត់បន្ទាត់រវាងជួរឈរតែប៉ុណ្ណោះ។
- រវាងជួរដេក; ឬ
- រវាងជួរឈរឬជួរដេកជាក់លាក់។
អ្នកក៏អាចដាក់បន្ទាត់នៅជុំវិញកោសិកានីមួយៗឬនៅកោសិកានីមួយៗ។
វិធីបន្ថែមបន្ទាត់នៅជុំវិញក្រឡាទាំងអស់ក្នុងតារាង
ដើម្បីបន្ថែមបន្ទាត់នៅជុំវិញក្រឡាទាំងអស់នៅក្នុងតារាងរបស់អ្នកបង្កើតបែបផែនបែបក្រឡាចត្រង្គនោះបន្ថែមដូចខាងក្រោមទៅសន្លឹករចនាប័ទ្មរបស់អ្នក:
td, th {
ព្រំដែន: រឹង 1px ខ្មៅ;
}
របៀបបន្ថែមបន្ទាត់រវាងជួរឈរក្នុងតារាង
ដើម្បីបន្ថែមបន្ទាត់រវាងជួរឈរ (វាបង្កើតបន្ទាត់បញ្ឈរដែលរត់ពីកំពូលទៅបាតនៅលើជួរឈររបស់តារាង) បន្ថែមដូចខាងក្រោមទៅសន្លឹករចនាប័ទ្មរបស់អ្នក:
td, th {
ស៊ុមខាងឆ្វេង: រឹង 1px ខ្មៅ;
}
បន្ទាប់មកប្រសិនបើអ្នកមិនចង់ឱ្យវាលេចឡើងនៅលើជួរឈរដំបូងអ្នកនឹងត្រូវបន្ថែមថ្នាក់មួយទៅក្រឡាទាំងនោះនិង td ។ ក្នុងឧទាហរណ៍នេះយើងសន្មតថាយើងមានថ្នាក់ គ្មានព្រំដែន នៅលើកោសិកាទាំងនោះហើយយើងដកចេញស៊ុមជាមួយក្បួន CSS បន្ថែម។ ដូច្នេះនៅទីនេះគឺថ្នាក់ HTML ដែលយើងនឹងប្រើ:
class = "no-border">
ហើយបន្ទាប់មកយើងអាចបន្ថែមរចនាប័ទ្មខាងក្រោមទៅសន្លឹករចនាបថរបស់យើង:
។ គ្មានព្រំដែន {
border-left: none;
}
របៀបបន្ថែមបន្ទាត់រវាងជួរដេកក្នុងតារាង
ដូចជាការបន្ថែមបន្ទាត់រវាងជួរឈរអ្នកអាចធ្វើដូច្នេះដោយរចនាប័ទ្មសាមញ្ញមួយដែលបានបន្ថែមទៅសន្លឹករចនាប័ទ្មរបស់អ្នក។ CSS ខាងក្រោមនឹងបន្ថែមបន្ទាត់បញ្ឈររវាងជួរនីមួយៗនៃតារាងរបស់យើង:
tr {
បាតខាងក្រោម: រឹង 1px ខ្មៅ;
}
ហើយដើម្បីដកស៊ុមចេញពីបាតនៃតារាងអ្នកនឹងបន្ថែមថ្នាក់ថ្មីម្តងទៀតទៅស្លាកនោះ:
class = "no-border">
បន្ថែមរចនាប័ទ្មខាងក្រោមទៅសន្លឹករចនាប័ទ្មរបស់អ្នក:
។ គ្មានព្រំដែន {
bottom-bottom: none;
}
របៀបបន្ថែមបន្ទាត់រវាងជួរឈរជាក់លាក់ឬជួរដេកនៅក្នុងតារាង
ប្រសិនបើអ្នកចង់បានបន្ទាត់រវាងជួរឬជួរឈរជាក់លាក់អ្នកត្រូវប្រើថ្នាក់មួយនៅលើក្រឡាឬជួរដេកទាំងនោះ។ ការបន្ថែមបន្ទាត់រវាងជួរឈរគឺមានការលំបាកជាងបន្តិចរវាងជួរដេកពីព្រោះអ្នកត្រូវតែបន្ថែមថ្នាក់ទៅគ្រប់ក្រឡានៅក្នុងជួរឈរនោះ។ ប្រសិនបើតារាងរបស់អ្នកត្រូវបានបង្កើតដោយស្វ័យប្រវត្តិពី CMS ប្រភេទមួយចំនួន វាប្រហែលជាមិនអាចធ្វើទៅបានទេប៉ុន្តែប្រសិនបើអ្នកកំពុងសរសេរកូដដោយដៃអ្នកអាចបន្ថែមថ្នាក់ដែលសមស្របតាមតម្រូវការដើម្បីសម្រេចឱ្យមានប្រសិទ្ធិភាពនេះ។
class = "side-border">
ការបន្ថែមបន្ទាត់រវាងជួរដេកគឺមានភាពងាយស្រួលជាងមុនព្រោះអ្នកអាចបន្ថែមថ្នាក់ទៅជួរដែលអ្នកចង់បានបន្ទាត់។
class = "border-bottom">
បន្ទាប់មកបន្ថែម CSS ទៅសន្លឹករចនាប័ទ្មរបស់អ្នក:
.border-side {
ស៊ុមខាងឆ្វេង: រឹង 1px ខ្មៅ;
}
។ បាត - បាត {
បាតខាងក្រោម: រឹង 1px ខ្មៅ;
}
របៀបបន្ថែមបន្ទាត់នៅជុំវិញក្រឡានីមួយៗក្នុងតារាង
ដើម្បីបន្ថែមបន្ទាត់ជុំវិញក្រឡានីមួយៗអ្នកបន្ថែមថ្នាក់មួយទៅក្រឡាដែលអ្នកចង់ស៊ុមជុំវិញ:
class = "border">
ហើយបន្ទាប់មកបន្ថែម CSS ទៅសន្លឹករចនាប័ទ្មរបស់អ្នក:
។ ព្រំដែន {
ព្រំដែន: រឹង 1px ខ្មៅ;
}
របៀបបន្ថែមបន្ទាត់នៅក្នុងក្រឡានីមួយៗក្នុងតារាង
ប្រសិនបើអ្នកចង់បន្ថែមបន្ទាត់ក្នុងមាតិការបស់ក្រឡាវិធីដែលស្រួលបំផុតដើម្បីធ្វើការនេះគឺដោយប្រើស្លាកផ្ដេក (
) ។
ព័ត៌មានជំនួយមានប្រយោជន៍
ប្រសិនបើអ្នកកត់សម្គាល់គម្លាតនៅក្នុងស៊ុមរបស់អ្នកអ្នកត្រូវប្រាកដថារចនាប័ទ្មការដួលរលំព្រំដែនត្រូវបានកំណត់នៅលើតារាងរបស់អ្នក។ បន្ថែមដូចខាងក្រោមទៅសន្លឹករចនាប័ទ្មរបស់អ្នក:
តារាង {
ព្រំដែន - ដួលរលំ: ការដួលរលំ;
}
អ្នកអាចជៀសវាង CSS ទាំងអស់ខាងលើនិងប្រើគុណលក្ខណៈព្រំដែននៅក្នុងស្លាកតារាងរបស់អ្នក។ ទោះជាយ៉ាងណាក៏ដោយចូរដឹងថាគុណលក្ខណៈរបស់គាត់ដែលមិនត្រូវបានលើកទឹកចិត្តគឺមិនសូវបត់បែនជាង CSS ពីព្រោះអ្នកអាចកំណត់ទទឹងនៃស៊ុមហើយអាចមានវានៅជុំវិញកោសិកាទាំងអស់របស់តុឬគ្មាន។