HTML <td> టాగ్

నిర్వచనం మరియు ఉపయోగం

<td> టాగ్ హ్ట్ముల్ పట్టికలో ప్రామాణిక డేటా కంపోనెంట్లను నిర్వచిస్తుంది.

HTML పట్టికలు రెండు రకాల కంపోనెంట్లు కలిగి ఉంటాయి:

  • శీర్షిక కంపోనెంట్ - శీర్షిక సమాచారం కంటేన్ చేస్తుంది (ఉపయోగించి): <th> కేంద్రంలో ఉన్న రాతి రంగు సాధారణ రాతి రంగు ఉంటుంది.
  • డేటా కంపోనెంట్ - డేటా కంటేన్ చేస్తుంది (ఉపయోగించి): <td> కేంద్రంలో ఉన్న రాతి రంగు సాధారణ రాతి రంగు ఉంటుంది.

అప్రమేయంగా ఉంటుంది:<td> కేంద్రంలో ఉన్న రాతి రంగు సాధారణ రాతి రంగు ఉంటుంది.

<th> కేంద్రంలో ఉన్న రాతి రంగు సాధారణ రాతి రంగు ఉంటుంది.

మరింత చూడండి:

HTML పాఠ్యక్రమం:HTML పట్టిక

HTML DOM పరికల్పనా పాఠ్యక్రమం:TableData ఆబ్జెక్ట్

CSS శిక్షణ పాఠ్యక్రమం:పట్టిక శైలి సెట్ చేయండి

ఇన్స్టాన్స్

ఉదాహరణ 1

కాలిపెట్టిన హ్ట్ముల్ పట్టిక, రెండు వరుసలు మరియు నాలుగు పట్టిక కంపోనెంట్లు ఉన్నాయి:

<table>
  <tr>
    <td>కంపోనెంట్ A</td>
    <td>కంపోనెంట్ B</td>
  </tr>
  <tr>
    <td>కంపోనెంట్ C</td>
    <td>కంపోనెంట్ D</td>
  </tr>
</table>

亲自试一试

ఉదాహరణ 2

ఎలా సరిహద్దు చేయాలి <td> 中的内容（使用 CSS）：

<table style="width:100%">
  <tr>
    <th>月份</th>
    <th>储蓄</th>
  </tr>
  <tr>
    <td>一月</td>
    <td style="text-align:right">￥3400</td>
  </tr>
  <tr>
    <td>二月</td>
    <td style="text-align:right">￥4500</td>
  </tr>
</table>

亲自试一试

ఉదాహరణ 3

ఎలా ప్రక్షేపణ రంగును పట్టిక కంపోనెంట్లకు జోడించాలి (CSS ఉపయోగించి):

<table>
  <tr>
    <th>月份</th>
    <th>储蓄</th>
  </tr>
  <tr>
    <td style="background-color:#FF0000">一月</td>
    <td style="background-color:#00FF00">￥3400</td>
  </tr>
 </table>

亲自试一试

例子 4

如何设置表格单元格的高度（使用 CSS）：

<table>
  <tr>
    <th>月份</th>
    <th>储蓄</th>
  </tr>
  <tr>
    <td style="height:100px">一月</td>
    <td style="height:100px">￥3400</td>
  </tr>
</table>

亲自试一试

例子 5

如何在表格单元格中规定不换行（使用 CSS）：

<table>
  <tr>
    <th>诗</th>
  </tr>
  <tr>
    <td style="white-space:nowrap">朝辞白帝彩云间，千里江陵一日还。两岸猿声啼不住，轻舟已过万重山。</td>
  </tr>
</table>

亲自试一试

例子 6

如何垂直对齐 <td> 中的内容（使用 CSS）：

<table style="width:50%;">
  <tr>
    <th>月份</th>
    <th>储蓄</th>
  </tr>
  <tr style="height:100px">
    <td style="vertical-align:bottom">一月</td>
    <td style="vertical-align:bottom">￥3400</td>
  </tr>
</table>

亲自试一试

例子 7

如何设置表格单元格的宽度（使用 CSS）：

<table style="width:100%">
  <tr>
    <th>月份</th>
    <th>储蓄</th>
  </tr>
  <tr>
    <td style="width:70%">一月</td>
    <td style="width:30%">￥3400</td>
  </tr>
</table>

亲自试一试

例子 8

如何创建表格标题：

<table>
  <tr>
    <th>姓名</th>
    <th>电邮</th>
    <th>电话</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  </tr>
</table>

亲自试一试

例子 9

如何创建带标题的表格：

<table>
  <caption>月份ly savings</caption>
  <tr>
    <th>月份</th>
    <th>储蓄</th>
  </tr>
  <tr>
    <td>一月</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>二月</td>
    <td>￥4500</td>
  </tr>
</table>

亲自试一试

例子 10

如何定义跨越多行或多列的表格单元格：

<table>
  <tr>
    <th>姓名</th>
    <th>电邮</th>
    <th colspan="2">电话</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
    <td>186-2345-6789</td>
  </tr>
</table>

亲自试一试

属性

属性 值 描述
colspan 数字 规定单元格应跨越的列数。
headers header_id 规定一个或多个与单元格相关的标题单元格。
rowspan 数字 设置单元格应跨越的行数。

గ్లోబల్ అట్రిబ్యూట్

<td> టాగ్ ఇవెంట్ అట్రిబ్యూట్ ను మద్దతు చేస్తుంది HTML లో గ్లోబల్ అట్రిబ్యూట్.

ఇవెంట్ అట్రిబ్యూట్

<td> టాగ్ ఇవెంట్ అట్రిబ్యూట్ ను మద్దతు చేస్తుంది HTML లో ఇవెంట్ అట్రిబ్యూట్.

డిఫాల్ట్ CSS సెట్టింగ్

అత్యంత బ్రౌజర్లు క్రింది డిఫాల్ట్ విలువలను వివరిస్తాయి <td> అంశం:

td {
  display: table-cell;
  vertical-align: inherit;
}

బ్రౌజర్ మద్దతు

క్రోమ్ ఎడ్జ్ ఫైర్ఫాక్స్ సఫారీ ఒపెరా
క్రోమ్ ఎడ్జ్ ఫైర్ఫాక్స్ సఫారీ ఒపెరా
మద్దతు మద్దతు మద్దతు మద్దతు మద్దతు