సిఎస్ఎస్ టేబుల్

సిఎస్ఎస్ ఉపయోగించడం ద్వారా హెచ్ఎంఎల్ టేబుల్ దృశ్యాన్ని చాలా మెరుగుపరుస్తుంది:

Company Contact Address City
Alibaba Ma Yun No. 699, Wangshang Road, Binjiang District Hangzhou
APPLE Tim Cook 1 Infinite Loop Cupertino, CA 95014 Cupertino
BAIDU Li YanHong Lixiang guoji dasha,No 58, beisihuanxilu Beijing
Canon Tsuneji Uchida One Canon Plaza Lake Success, NY 11042 New York
Google Larry Page 1600 Amphitheatre Parkway Mountain View, CA 94043 Mountain View
HUAWEI Ren Zhengfei Putian Huawei Base, Longgang District Shenzhen
Microsoft Bill Gates 15700 NE 39th St Redmond, WA 98052 Redmond
Nokia Olli-Pekka Kallasvuo P.O. Box 226, FIN-00045 Nokia Group Helsinki
SONY Kazuo Hirai Park Ridge, NJ 07656 Park Ridge
Tencent Ma Huateng Tencent Building, High-tech Park, Nanshan District Shenzhen

మీరే ప్రయత్నించండి

表格边框

如需在 CSS 中设置表格边框，请使用 border 属性。

下例为

、
和 元素规定了黑色边框：

మొదటి పేరు చివరి పేరు
Bill Gates
Steve Jobs

ఉదాహరణ

table, th, td {
  border: 1px solid black;
}

మీరే ప్రయత్నించండి

注意：上例中的表格拥有双边框。这是因为 table 和

和 元素都有单独的边框。

全宽表格

కొన్ని సందర్భాల్లో, పై పట్టిక చాలా చిన్నదిగా కనిపిస్తుంది. మీరు మొత్తం స్క్రీన్ను కప్పించే పట్టికను కలిగించడానికి, <table> కెల్లిక్రానికి width: 100% ఉపయోగించుము:

ఉదాహరణ

table {
  width: 100%;
}

మీరే ప్రయత్నించండి

రెండు కర్సర్లు

దిగువ పట్టికలో పట్టికలు మరియు th, td కెల్లిక్రాలు రెండు కర్సర్లు ఉన్నాయి. ఇది పట్టిక మరియు th, td కెల్లిక్రాలు ప్రత్యేక కర్సర్లు కలిగి ఉండడం కారణంగా ఉంది.

రెండు కర్సర్లను తొలగించడానికి ఈ ఉదాహరణను చూడండి.

పట్టిక కర్సర్ల మెరుగుపరిచుట

border-collapse పట్టిక కర్సర్లను ఒక కర్సర్ లో కలిపివేయాలా అని విధానం సెట్ చేయుట:

మొదటి పేరు చివరి పేరు
Bill Gates
Steve Jobs

ఉదాహరణ

table {
  border-collapse: collapse;
}
table, th, td {
  border: 1px solid black;
}

మీరే ప్రయత్నించండి

పట్టిక చుట్టూ మాత్రమే కర్సర్ ఉండాలంటే, మాత్రమే <table> కు border సెట్ చేయుము: border padding

మొదటి పేరు చివరి పేరు
Bill Gates
Steve Jobs

ఉదాహరణ

table {
  border: 1px solid black;
}

మీరే ప్రయత్నించండి

పట్టిక వెడల్పన మరియు పైకి వెడల్పన

పట్టిక వెడల్పన మరియు పైకి వెడల్పన నిర్వచించబడింది. width మరియు height అటువంటి విధానం నిర్వచిస్తుంది.

ఈ ఉదాహరణలో పట్టిక యొక్క వెడల్పనను 100% చేయడానికి మరియు <th> కెల్లిక్రం యొక్క పైకి వెడల్పనను 50px చేయడానికి ఉపయోగించుము:

మొదటి పేరు చివరి పేరు సేవింగ్స్
Bill Gates $100
Steve Jobs $150
Elon Musk $300

ఉదాహరణ

table {
  width: 100%;
}
th {
  height: 50px;
}

మీరే ప్రయత్నించండి

పేజీ పరిమితిలో సగం పరిమితిలో ఉన్న పట్టికను సృష్టించడానికి width: 50% ఉపయోగించుము:

ఉదాహరణ

table {
  width: 50%;
}
th {
  height: 70px;
}

మీరే ప్రయత్నించండి

హోరిజంటల్ అలిగ్న్మెంట్

text-align పట్టికలోని <th> లేదా <td> కెల్లిక్రం లో ఉన్న విషయాల హోరిజంటల్ అలిగ్న్మెంట్ విధానం సెట్ చేయుట.

అప్రమేయంగా, <th> కెల్లిక్రం లో ఉన్న విషయాలు మధ్యకు వర్గానిగా ఉంటాయి, మరియు <td> కెల్లిక్రం లో ఉన్న విషయాలు ఎడమకు వర్గానిగా ఉంటాయి.

నాణ్యంగా, <td> కెల్లిక్రం లో ఉన్న విషయాలను మధ్యకు వర్గానిగా అమర్చుటకు text-align: center ఉపయోగించుము:

మొదటి పేరు చివరి పేరు సేవింగ్స్
Bill Gates $100
Steve Jobs $150
Elon Musk $300

ఉదాహరణ

th {
  text-align: center;
}

మీరే ప్రయత్నించండి

ఈ ఉదాహరణలో <th> కెల్లిక్రంలో వచనాన్ని ఎడమకు వర్గానిగా అమర్చుతుంది:

మొదటి పేరు చివరి పేరు సేవింగ్స్
Bill Gates $100
Steve Jobs $150
Elon Musk $300

ఉదాహరణ

th {
  padding: 15px;
}

మీరే ప్రయత్నించండి

వర్గానిగా అమర్చుట

vertical-align పట్టికలోని <th> లేదా <td> కెల్లిక్రమాలు పైకి, క్రిందకు లేదా మధ్యకు వర్గానిగా అమర్చుట విధానం సెట్ చేయుము.

అప్రమేయంగా, పట్టికలో ఉన్న విషయాలు ప్రాంతం క్రిందకు వర్గానిగా ఉంటాయి (<th> మరియు <td> కెల్లిక్రమాలు కూడా అప్రమేయంగా ఉంటాయి).

ఈ ఉదాహరణలో <td> కెల్లిక్రమం యొక్క వర్గాన్ని క్రిందకు వర్గానిగా అమర్చుతుంది:

మొదటి పేరు చివరి పేరు సేవింగ్స్
Bill Gates $100
Steve Jobs $150
Elon Musk $300

ఉదాహరణ

td {
  height: 50px;
  vertical-align: bottom;
}

మీరే ప్రయత్నించండి

పట్టిక లోపలి ప్యాడింగ్

పట్టిక లోపలి ప్యాడింగ్ కింది మరియు పట్టిక కంటెంట్ మధ్య అంతరాన్ని నియంత్రించడానికి, <td> మరియు <th> ఎలమెంట్ పై ఉపయోగించండి padding

మొదటి పేరు చివరి పేరు సేవింగ్స్
Bill Gates $100
Steve Jobs $150
Elon Musk $300

ఉదాహరణ

లక్షణాలు, మరియు హరిజన్టల్ విభజన పట్టిక చేయడానికి ఉపయోగించండి
  లక్షణాలు:
  padding: 15px;
}

మీరే ప్రయత్నించండి

text-align: left;

మొదటి పేరు చివరి పేరు సేవింగ్స్
Bill Gates $100
Steve Jobs $150
Elon Musk $300

హరిజన్టల్ విభజన చేర్చండి <th> మరియు <td> కు border-bottom

ఉదాహరణ

లక్షణాలు, మరియు హరిజన్టల్ విభజన పట్టిక చేయడానికి ఉపయోగించండి
  th, td {
}

మీరే ప్రయత్నించండి

border-bottom: 1px solid #ddd;

మౌస్ హోవర్ పట్టిక ఎంపికకర్త, మరియు మౌస్ హోవర్ ప్రభావం ఉన్న పట్టిక పంక్తులను ప్రదర్శించండి :hover

మొదటి పేరు చివరి పేరు సేవింగ్స్
Bill Gates $100
Steve Jobs $150
Elon Musk $300

ఉదాహరణ

tr:hover {background-color: #f5f5f5;}

మీరే ప్రయత్నించండి

పిచ్చిమాల పట్టిక

మొదటి పేరు చివరి పేరు సేవింగ్స్
Bill Gates $100
Steve Jobs $150
Elon Musk $300

పిచ్చిమాల పట్టిక ప్రభావాన్ని సాధించడానికి ఉపయోగించండి nth-child() ఎంపికకర్త, మరియు అన్ని విషయాలను (లేదా విషయాలను) పట్టిక పంక్తులకు జోడించండి background-color:

ఉదాహరణ

tr:nth-child(even) {background-color: #f2f2f2;}

మీరే ప్రయత్నించండి

పట్టిక రంగు

ఈ ఉదాహరణలో, <th> ఎలమెంట్ యొక్క బ్యాక్గ్రౌండ్ కలర్ మరియు టెక్స్ట్ కలర్ నిర్దేశించబడింది:

మొదటి పేరు చివరి పేరు సేవింగ్స్
Bill Gates $100
Steve Jobs $150
Elon Musk $300

ఉదాహరణ

th {
  background-color: #4CAF50;
  color: white;
}

మీరే ప్రయత్నించండి

ప్రతిక్రియాత్మక పట్టిక

పూర్తి కంటెంట్ చూపించడానికి పరిమితమైన స్క్రీన్ ఉన్నప్పుడు, ప్రతిక్రియాత్మక పట్టిక అప్రమేయంగా హరిజన్టల్ స్క్రాల్ బార్ చూపుతుంది:

మొదటి పేరు చివరి పేరు Points Points Points Points Points Points Points Points Points Points
Bill Gates 50 50 50 50 50 50 50 50 50 50
Steve Jobs 94 94 94 94 94 94 94 94 94 94
Elon Musk 67 67 67 67 67 67 67 67 67 67

<table> ఎలమెంట్ చుట్టూ కలిపి ఉంచిన overflow-x:auto యొక్క కంటైనర్ ఎలమెంట్ (ఉదా <div>), అనుసరించుము అనుసరించుము ప్రతిక్రియాత్మక ప్రభావాన్ని సాధించడానికి:

ఉదాహరణ

<div style="overflow-x:auto;">
<table>
... table content ...
</table>
</div>

మీరే ప్రయత్నించండి

ప్రకటనలు:OS X Lion (మాక్ లో) లో, స్క్రాల్ బార్ అప్రమేయంగా మరియు ఉపయోగించడానికి మాత్రమే చూపుతుంది (కానీ "overflow:scroll" అనేది అమర్చబడింది).

మరిన్ని ఉదాహరణలు

ఒక అలంకరించబడిన పట్టికను తయారు చేయుము
ఈ ఉదాహరణ పట్టికను ఎలా అలంకరించాలనేది ప్రదర్శిస్తుంది.
పట్టిక శీర్షిక స్థానాన్ని నిర్ణయించుము
ఈ ఉదాహరణ పట్టిక శీర్షికను ఎలా స్థానం చేయాలనేది ప్రదర్శిస్తుంది.

CSS పట్టిక లక్షణాలు

లక్షణాలు వివరణ
border 简写属性。在一条声明中设置所有边框属性。
border-collapse 规定是否应折叠表格边框。
border-spacing 规定相邻单元格之间的边框的距离。
caption-side 规定表格标题的位置。
empty-cells 规定是否在表格中的空白单元格上显示边框和背景。
table-layout 设置用于表格的布局算法。