html 테이블과 테이블 간격




CSS에서 cellpadding 및 cellspacing 설정? (18)

태만

브라우저의 기본 동작은 다음과 같습니다.

table {border-collapse: collapse;}
td    {padding: 0px;}

셀 팟딩

셀의 내용과 셀 벽 사이의 간격을 설정합니다.

table {border-collapse: collapse;}
td    {padding: 6px;}

셀 간격

표 셀 사이의 공간을 제어합니다.

table {border-spacing: 2px;}
td    {padding: 0px;}

양자 모두

table {border-spacing: 2px;}
td    {padding: 6px;}

둘 다 (특별)

table {border-spacing: 8px 2px;}
td    {padding: 6px;}

참고 : border-spacing 설정된 경우 표의 border-collapse 속성이 separate 나타냅니다.

직접 체험 해보십시오!

Here 이것을 달성 할 수있는 html 방식을 찾을 수 있습니다.

HTML 테이블에서 cellpaddingcellspacing 은 다음과 같이 설정할 수 있습니다.

<table cellspacing="1" cellpadding="1">

CSS를 사용하여 어떻게 동일한 작업을 수행 할 수 있습니까?


0이 아닌 cellspacing 값을 원한 사람들을 위해, 다음 CSS는 나를 위해 일했지만 Firefox에서만 테스트 할 수 있습니다. 호환성에 대한 자세한 내용 은 다른 위치게시Quirksmode 링크를 참조하십시오. 구형 Internet Explorer 버전에서는 작동하지 않을 수 있습니다.

table {
    border-collapse: separate;
    border-spacing: 2px;
}

CSS 패딩 속성을 사용하여 테이블 셀 안에 패딩을 쉽게 설정할 수 있습니다. 이는 테이블의 셀 패딩 속성과 동일한 효과를 내기위한 올바른 방법입니다.

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

table th,
table td {
  padding: 10px;
  /* Apply cell padding */
}
<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <title>Set Cellpadding in CSS</title>

</head>

<body>

  <table>
    <thead>
      <tr>
        <th>Row</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Clark</td>
        <td>Kent</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

마찬가지로 CSS border-spacing 속성을 사용하여 cellspacing 속성과 같이 인접한 표 셀 테두리 사이에 간격을 적용 할 수 있습니다. 그러나 border-spacing 속성을 사용하기 위해서는 border-collapse 속성 값을 별도로 지정해야합니다.

table {
  border-collapse: separate;
  border-spacing: 10px;
  /* Apply cell spacing */
}

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

table th,
table td {
  padding: 5px;
  /* Apply cell padding */
}
<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <title>Set Cellspacing in CSS</title>

</head>

<body>

  <table>
    <thead>
      <tr>
        <th>Row</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Clark</td>
        <td>Kent</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>

</body>
</html>


HTML 테이블에서 cellpaddingcellspacing 은 다음과 같이 설정할 수 있습니다.

셀 패딩의 경우 : 단순한 td/thpadding 호출하면됩니다.

전의:

/******Call-Padding**********/

table { 
    border-collapse: collapse;
}

td { 
  border: 1px solid red;
  padding: 10px;
}
<table>
		<tr>
			<th>Head1 </th>
			<th>Head2 </th>
			<th>Head3 </th>
			<th>Head4 </th>
		</tr>
		<tr>
			<td>11</td>
			<td>12</td>
			<td>13</td>
			<td>14</td>
		</tr>
		<tr>
			<td>21</td>
			<td>22</td>
			<td>23</td>
			<td>24</td>
		</tr>
		<tr> 
			<td>31</td>
			<td>32</td>
			<td>33</td>
			<td>34</td>
		</tr>
		<tr>
			<td>41</td>
			<td>42</td>
			<td>43</td>
			<td>44</td>
		</tr>
	</table>

table { 
    border-collapse: collapse;
}

td { 
  border: 1px solid red;
  padding: 10px;
}

셀 간격

간단한 table border-spacing 만 호출하면됩니다.

전의:

/********* Cell-Spacing   ********/
table { 
    border-spacing: 10px;
    border-collapse: separate;
}

td { 
  border: 1px solid red;
}
<table>
		<tr>
			<th>Head1</th>
			<th>Head2</th>
			<th>Head3</th>
			<th>Head4</th>
		</tr>
		<tr>
			<td>11</td>
			<td>12</td>
			<td>13</td>
			<td>14</td>
		</tr>
		<tr>
			<td>21</td>
			<td>22</td>
			<td>23</td>
			<td>24</td>
		</tr>
		<tr> 
			<td>31</td>
			<td>32</td>
			<td>33</td>
			<td>34</td>
		</tr>
		<tr>
			<td>41</td>
			<td>42</td>
			<td>43</td>
			<td>44</td>
		</tr>
	</table>

/********* Cell-Spacing   ********/
table { 
    border-spacing: 10px;
    border-collapse: separate;
}

td { 
  border: 1px solid red;
}

더 많은 표 스타일 CSS 소스 링크 여기 에 CSS로 더 많은 테이블 스타일 을 얻을


W3C 분류에서 알 수 있듯이 <table> 은 'only'데이터를 표시하기위한 것입니다.

이를 바탕으로 배경과 모든 것을 가진 <div> 를 만드는 것이 훨씬 쉽고 position: absolute; 사용하여 데이터 위에 테이블이 떠있는 것을 발견했습니다 position: absolute;background: transparent; ...

Chrome, IE (6 이상) 및 Mozilla (2 이상)에서 작동합니다.

여백은 <tr> , <td> , <span> 또는 <input> 아닌 <tr> <table> , <div><form> 과 같은 컨테이너 요소 사이에 스페이서를 만드는 데 사용됩니다. 컨테이너 요소가 아닌 다른 요소를 사용하면 향후 브라우저 업데이트를 위해 웹 사이트를 계속 조정할 수 있습니다.


div의 셀 내용을 감싸고 원하는 모든 작업을 수행 할 수 있지만 획일 화 된 효과를 얻으려면 열의 모든 셀을 줄 바꿈해야합니다. 예를 들어, 왼쪽 및 오른쪽 여백을 넓히려면 :

그래서 CSS는,

div.cellwidener {
  margin: 0px 15px 0px 15px;
}
td.tight {
  padding: 0px;
}
<table border="0">
  <tr>
    <td class="tight">
      <div class="cellwidener">My content</div>
    </td>
  </tr>
</table>

예, 번거 로움입니다. 네, 그것은 IE와 함께 작동합니다. 사실 IE에서이 기능을 테스트 한 바 있습니다. 왜냐하면 그것이 우리가 직장에서 사용할 수 있도록 허용 된 전부이기 때문입니다.


또한, cellspacing="0" 을 원한다면, table 의 스타일 시트에 border-collapse: collapse 를 추가하는 것을 잊지 마십시오.


스타일 자체를 테이블 자체에 직접 추가하는 것은 어떻습니까? 이것은 CSS에 table 를 사용하는 대신 페이지에 여러 개의 표가있는 경우 잘못된 방법입니다.

<table style="border-collapse: separate;border-spacing: 2px;">
    <tr>
        <td style="padding: 4px 4px;">Some Text</td>
    </tr>
</table>

이 스타일은 셀 패드 , 셀 간격테두리 와 같은 테이블의 전체 재설정 용 스타일입니다.

내 reset.css 파일에이 스타일이 있습니다.

table{
    border:0;          /* Replace border */
    border-spacing: 0px; /* Replace cellspacing */
    border-collapse: collapse; /* Patch for Internet Explorer 6 and Internet Explorer 7 */
}
table td{
    padding: 0px;/*replace cellpadding*/
}

이 시도:

table {
    border-collapse: separate;
    border-spacing: 10px;
}
table td, table th {
    padding: 10px;
}

또는 이것을 시도하십시오 :

table {
    border-collapse: collapse;
}
table td, table th {
    padding: 10px;
}

테이블 cellspacing과 cellpadding은 HTML 5에서는 더 이상 사용되지 않습니다. 셀 영역에 대해서는 border-spacing을 사용해야하고 cellpadding에 대해서는 border-collapse를 사용해야합니다.

그리고 HTML5 코드에서 이것을 사용하지 않도록하십시오. CSS-3 파일에서 항상이 값을 사용하십시오.


표 셀의 여백 설정은 내가 아는 한 실제로 아무런 효과가 없습니다. cellspacing 에 대한 실제 CSS는 border-spacing 이지만 Internet Explorer에서는 작동하지 않습니다.

앞서 설명한 것처럼 border-collapse: collapse 를 사용하여 셀 간격을 0으로 설정할 수 있지만 다른 모든 값에 대해서는 셀 영역 속성을 계속 사용하는 것이 유일한 방법이라고 생각합니다.


border-spacingpadding 사용하여 CSS에서 다음과 같이 간단하게 할 수 있습니다.

table {
  border-collapse: collapse;
}

td, th {
  padding: 1em;
  border: 1px solid blue;
}
<table>
  <tr>
    <th>head_1</th>
    <th>head_2</th>
    <th>head_3</th>
    <th>head_4</th>
  </tr>
  <tr>
    <td>txt_1</td>
    <td>txt_2</td>
    <td>txt_3</td>
    <td>txt_4</td>
  </tr>
</table>


기초

CSS에서 "셀 padding "을 제어하기 위해 테이블 ​​셀에 단순히 padding 을 사용할 수 있습니다. 예 : 10px "cellpadding"

td { 
    padding: 10px;
}

"cellspacing"의 경우 border-spacing CSS 속성을 테이블에 적용 할 수 있습니다. 예 : 10px "cellspacing"의 경우 :

table { 
    border-spacing: 10px;
    border-collapse: separate;
}

이 속성은 별도의 가로 및 세로 간격을 허용하기도합니다. 예전 학교의 "셀 영역 지정"으로는 할 수 없었던 것입니다.

IE <= 7 문제

이것은 Internet Explorer 7을 제외한 거의 모든 대중적인 브라우저에서 작동 할 것입니다. Internet Explorer 7을 사용하면 운이 좋지 않을 것입니다. 이 브라우저는 인접한 표 셀의 테두리를 병합하는 테두리 border-collapse 속성을 여전히 지원하므로 "거의"라고 말합니다. cellspacing (즉, cellspacing="0" )을 제거하려고하면 border-collapse:collapse 가 동일한 효과를 가져야합니다. 즉, 표 셀 사이에 공백이 없어야합니다. 그러나이 지원은 테이블 요소의 기존 cellspacing HTML 속성을 덮어 쓰지 않으므로 버그가 있습니다.

즉, Internet Explorer가 아닌 5-7 브라우저의 경우 border-spacing 처리합니다. Internet Explorer의 경우 상황이 옳다면 (0 셀 스페이스가 필요하고 테이블이 이미 정의되어 있지 않은 경우) border-collapse:collapse 사용할 수 있습니다.

table { 
    border-spacing: 0;
    border-collapse: collapse;
}

참고 : 테이블 및 브라우저에 적용 할 수있는 CSS 속성에 대한 개요를 보려면이 환상적인 Quirksmode 페이지를 참조하십시오 .


table
{
    border-collapse: collapse; /* 'cellspacing' equivalent */
}

table td, table th
{
    padding: 0; /* 'cellpadding' equivalent */
}

<table>
    <tr>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

CSS의 padding 으로 cell-spacing padding 을 제공 할 수 있으며 테이블의 border-spacing 을 설정하여 cell-spacing 을 설정할 수 있습니다.

table {
    border-spacing: 10px;
}
td {
    padding: 10px;
}

Fiddle .


table{border-spacing:4px; color: #000; background:#ccc; }
td{padding-left:4px;}

td {
    padding: npx; //for cellpadding
    margin: npx; //for cellspacing
    border-collapse: collapse; //for showing borders in a better shape.
}

margin 이 작동하지 않으면 tr displayblock 하도록 설정하면 여백이 작동합니다.





alignment