둘 이상의 셀을 하나로 병합하려면 태그의 colspan 및 rowspan 속성을 사용하십시오.
예 12.3. 잘못된 셀 병합
| 셀 1 | 셀 2 | |
| 셀 3 | 셀 4 | |
결과 이 예그림에 나와 있습니다. 12.5.
쌀. 12.5. 테이블의 추가 셀 모양
예제의 첫 번째 줄에는 세 개의 셀이 있습니다. 그 중 두 개는 colspan 속성과 병합되고 두 번째 줄에는 두 개의 셀만 추가됩니다. 이로 인해 브라우저에 추가 셀이 표시됩니다. 그것은 그림에서 명확하게 볼 수 있습니다. 12.5.
colspan 및 rowspan 속성의 올바른 사용은 예제 12-4에 나와 있습니다.
예 12.4. 세로 및 가로로 셀 병합
| 브라우저 | 인터넷 익스플로러 | 오페라 | 파이어폭스 | ||||
|---|---|---|---|---|---|---|---|
| 6.0 | 7.0 | 7.0 | 8.0 | 9.0 | 1.0 | 2.0 | |
| 지원 | 아니다 | 예 | 아니다 | 예 | 예 | 예 | 예 |
이 예의 결과는 그림 1에 나와 있습니다. 12.6.
쌀. 12.6. 병합된 셀이 있는 표
이 테이블에는 8개의 열과 3개의 행이 있습니다. "Internet Explorer", "Opera" 및 "Firefox"라는 글자가 있는 셀의 일부가 병합되어 2개가 있고 3개의 셀이 있습니다. "브라우저"라는 레이블이 붙은 셀에 수직 병합이 적용되었습니다.
테이블가장 좋은 예는 HTML의 Listing 5-10에 표시된 간단한 테이블입니다.
이것은 셀에 번호가 매겨진 일반 테이블이므로 앞으로 더 쉬울 것입니다. 무화과에. 5.2는 웹 브라우저 창에서 그 모양을 보여줍니다.
이제 그림 1의 표를 고려하십시오. 5.3.
여기에 일부 셀이 병합됩니다. 병합된 셀이 하나로 병합된 것처럼 보이는 것을 알 수 있습니다. 그것을 하는 방법?
특히 이 태그 및
여러 셀을 가로로 하나로 병합하려면 다음 단계를 따르세요.
1. 코드에서 찾기 HTML 태그 (
2. COLSPAN 속성을 입력하고 결합할 셀의 수를 할당하고 맨 처음 셀도 계산합니다.
3. 태그 제거(
테이블의 셀 2와 3을 병합해 보겠습니다(목록 5.10 참조). 이 테이블의 첫 번째 행을 생성하는 수정된 코드 조각은 목록 5-11에 나와 있습니다.
같은 방식으로 결합된 셀 4 + 5 및 12 + 13 + 14 + 15를 만듭니다.
세로로 셀을 병합하는 것은 조금 더 까다롭습니다. 이를 위해 따라야 할 단계는 다음과 같습니다.
1. 코드에서 찾기 HTML 문자열(태그), 병합된 셀 중 첫 번째 셀을 포함합니다(위에서 아래로 행을 계산하는 경우).
2. 태그 찾기(
3. ROWSPAN 속성을 입력하고 수량을 할당합니다. 병합된 셀, 그들 중 맨 처음을 포함하여.
4. 다음 줄을 보고 태그를 제거합니다(
우리는 떠났다 셀 병합우리 테이블의 1번과 6번. Listing 5-12에는 수정된 HTML 코드 스니펫이 포함되어 있습니다(수정 사항은 첫 번째 줄과 두 번째 줄에 영향을 미침).
첫 번째 셀과 병합되기 때문에 여섯 번째 셀을 만드는 두 번째 행에서 태그를 제거했습니다.
이제는 자주 사용되지 않습니다. 그러나 이전에는 테이블 형식 웹 디자인의 전성기 시절에는 없는 테이블을 만나기가 어려웠습니다. 병합된 셀. 어느 쪽이든, 그것에 대해 아는 것은 나쁠 것이 없습니다.
표에서 세로, 가로로 셀 병합하는 방법에 대해 자세히 알려드리겠습니다.
이 기사에서 우리는 원칙을 설명하지 않을 것입니다 HTML 생성테이블, 이 지식을 위해 HTML에 대한 과정을 수강하십시오.
테이블 내부의 셀을 병합하려면 태그에 두 가지 속성이 설정되어 있습니다.
어떤 사람들은 이러한 속성을 사용하여 셀을 병합하는 데 문제가 있습니다.
colspan 및 rowspan 속성은 0에서 1000까지의 정수 값을 매개변수로 사용합니다. 다음은 표의 셀을 병합하는 방법에 대한 작은 예입니다.
얼핏 보면 그리 복잡하지 않은 구조로 구현되어 있지만 그 풍부함을 살펴보면
우리는 셀을 병합하는 보편적이고 매우 편리한 방법을 제공합니다.
시작하려면 미래의 테이블을 위한 공백을 준비하여 분리된 모든 셀과 함께 제공하십시오. 테이블이 될 수 있습니다. 3x3, 6x10등등. 왼쪽에서 오른쪽으로, 위에서 아래로 셀 수 있도록 각 셀에 고유한 번호를 부여합니다.
이 방법을 사용하여 위에 표시된 테이블 생성을 분석해 보겠습니다.
공작물 코드와 공작물 자체의 모양은 다음과 같습니다.
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
숫자가 1,2,3인 셀을 가로로 병합해야 합니다. 이렇게 하려면 코드의 셀 번호 1에 다음을 추가합니다. 열 범위 속성값 3 . 그리고 삭제
| 1,2,3 | 4 | ||
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 1,2,3 | 4 | ||
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
이제 셀 9와 13을 수직으로 병합해야 합니다. 유사한 절차를 수행합니다. 9번 셀에 대해 rowspan 속성을 값 2로 설정하고 13번 셀을 삭제하고 해당 셀이 포함된 셀 번호를 병합된 셀에 씁니다.
이것은 우리의 코드를 변경하고 모습테이블:
| 1,2,3 | 4 | ||
| 5 | 6 | 7 | 8 |
| 9,13 | 10 | 11 | 12 |
| 14 | 15 | 16 | |
| 1,2,3 | 4 | ||
| 5 | 6 | 7 | 8 |
| 9,13 | 10 | 11 | 12 |
| 14 | 15 | 16 | |
11,12,15,16개의 셀을 하나로 병합하는 작업이 남아 있습니다. 이를 위해 11번 셀에 colspan ="2" rowspan ="2" 속성을 씁니다. 셀 12,15,16은 코드에서 제거됩니다. 결합 된 셀에 숫자 11,12,13,14를 씁니다.
이것이 우리의 코드와 테이블의 모양이 변경되는 방식입니다:
| 1,2,3 | 4 | ||
| 5 | 6 | 7 | 8 |
| 9,13 | 10 | 11,12,15,16 | |
| 14 | |||
| 1,2,3 | 4 | ||
| 5 | 6 | 7 | 8 |
| 9,13 | 10 | 11,12,15,16 | |
| 14 | |||
그게 다야, 우리는 원래 테이블을 얻었습니다. 이제 셀에 편리한 정보를 채울 수 있습니다.
셀 병합으로 복잡한 테이블을 생성하는 원리를 이해하시기 바랍니다.
한 가지 흥미로운 기능에 대해 이야기하는 것이 남아 있습니다. HTML 언어. 이 소위 세포 병합테이블. 가장 좋은 예는 HTML이 Listing 5-10에 표시된 간단한 테이블입니다.
목록 5.10
이것은 셀에 번호가 매겨진 일반 테이블이므로 앞으로 더 쉬울 것입니다. 무화과에. 5.2는 웹 브라우저 창에서 그 모양을 보여줍니다.
이제 그림 1의 표를 고려하십시오. 5.3.
여기에 일부 셀이 병합됩니다. 병합된 셀이 하나로 병합된 것처럼 보이는 것을 알 수 있습니다. 그것을 하는 방법?
특히 이 태그 및
쌀. 5.2.셀이 병합될 원본 테이블
쌀. 5.3.그림에 표시된 표. 5.2, 일부 셀 병합 후(병합된 셀은 번호를 추가하여 표시됨)
여러 셀을 가로로 하나로 병합하려면 다음 단계를 따르세요.
1. HTML 코드에서 태그 찾기
같은 방식으로 결합된 셀 4 + 5 및 12 + 13 + 14 + 15를 만듭니다.
셀을 세로로 병합하는 것은 약간 까다롭습니다. 이를 위해 따라야 할 단계는 다음과 같습니다.
1. HTML 코드에서 첫 번째 병합할 셀이 포함된 행(태그)을 찾습니다(위에서 아래로 행을 계산하는 경우).
2. 이 줄의 코드에서 태그를 찾습니다.
첫 번째 셀과 병합되기 때문에 여섯 번째 셀을 만드는 두 번째 행에서 태그를 제거했습니다.
셀 병합은 요즘 자주 사용되지 않습니다. 그러나 이전에 표 형식 웹 디자인의 전성기 동안(표 형식 웹 디자인에 대해서는 10장), 병합된 셀이 없는 테이블을 찾기가 어려웠습니다. 어느 쪽이든, 그것에 대해 아는 것은 나쁠 것이 없습니다.
아주 편리한 아이템. 당신은 그들과 함께 무엇이든 할 수 있습니다. 물론 주요 목적은 정보를 테이블 형식으로 배치하는 것입니다. 그러나 웹 사이트 개발자는 더 멀리 나아갔습니다. 한 때 테이블을 사용하여 사이트 프레임을 만드는 것이 매우 인기가 있었습니다. 이제 전문가들은 그렇게 하지 않으려고 합니다.
테이블은 많은 수의 속성으로 인해 널리 사용되었습니다. 예를 들어, 행이나 열을 결합하는 속성은 매우 유용한 것으로 판명되었습니다.
이론 소개
HTML에서 셀은 colspan과 rowspan의 두 가지 속성을 사용하여 병합됩니다. td 태그에 대해 지정됩니다.
주제를 살펴보기 전에 먼저 테이블의 구조를 분석해 보겠습니다. 모든 테이블에는 셀이 있는 행이 있습니다. 처음에는 모든 테이블이 같은 수의 셀을 포함해야 함을 기억하십시오.
위의 그림은 각각 3개의 셀이 있는 2개의 행을 보여줍니다. 이것은 일반 테이블입니다. 행에 더 적은 수의 셀을 지정하면 테이블이 "밖으로 이동"하고 모든 것이 잘못 표시됩니다.
HTML 테이블: 세로 및 가로로 셀 병합
무언가를 연결하는 경우에만 더 적은 수의 셀이나 행을 지정할 수 있습니다. 그러나 제거된 요소 대신 시작에 가장 가까운 이웃에 추가 속성을 지정해야 합니다. 열을 결합하면 colspan, 행이면 rowspan입니다. 속성 값은 결합할 요소의 수를 지정합니다.
처음에 가장 가까운 요소에 지정해야 합니다. 예를 들어 위 그림에서 셀 1과 2를 병합하려면 colspan 속성이 2로 설정되도록 셀 1을 설정합니다. 그리고 셀 번호 2 또는 3을 삭제하면 더 이상 중요하지 않습니다.
결론은 셀이 차지하는 공간을 알려주는 것입니다. 기본값은 1입니다.
HTML 테이블에서 세로로 셀을 병합하는 것도 동일한 원칙을 따릅니다. 단순히 점유된 공간은 수직으로 간주됩니다. 아래 그림을 참조하십시오.
여기서 숫자 43이 있는 셀은 두 줄을 차지합니다. 이를 위해 rowspan 속성이 지정되었습니다. 기억하기 쉽습니다.
- 행 - 문자열.
- 열 - 열/열.
- 스팬 - 유니온.
언어의 창시자들은 그것을 알지 못하더라도 적어도 어떻게든 이해할 수 있도록 가능한 한 인간에게 가깝게 하려고 노력했습니다.
HTML에서 셀은 수직과 수평의 두 방향으로 한 번에 병합될 수 있습니다. 이렇게 하려면 두 속성을 동시에 지정하십시오.
위의 그림에서 이것은 행, 열, 동시에 열과 행과 같이 합집합을 수행할 수 있음을 나타냅니다.
HTML: 셀 병합. 예
큰 테이블에서 더 복잡한 단계별 예를 살펴보겠습니다. 왼쪽 아래 그림은 일반 테이블의 원본 버전을 보여줍니다. 그리고 오른쪽에는 두 번째 행에 두 셀이 결합된 변형이 있습니다. 따라서 HTML 코드를 비교하는 것이 더 명확하고 쉽습니다.
중앙에 있는 세 개의 셀을 병합할 수도 있습니다. 첫 번째 경우에는 colspan 속성이 셀 #1에 지정되었습니다. 여기서 첫 번째 것은 변경되지 않고 3과 같은 colspan이 두 번째 것에 추가되었습니다.
한 행의 모든 셀을 단일 셀로 병합하려면 4개의 tds를 삭제하고 첫 번째 셀에 colspan="5"를 지정합니다.
보시다시피 실제로는 매우 간단합니다. 어려운 것은 없습니다. 가장 중요한 것은 처음부터 테이블의 모든 함정을 주의 깊게 이해한 다음 문제가 발생하지 않는 것입니다.
사이트 프레임워크로서의 테이블
HTML에서 셀 병합이 Word 또는 Excel에서와 같이 일반 정보 테이블에 항상 사용되는 것은 아닙니다. 웹 사이트 개발자는 예외 없이 웹 사이트 레이아웃에 자주 사용했습니다.
예를 들어, 이 사이트 레이아웃을 고려하십시오. 이 디자인은 매우 단순하고 원시적입니다. 그러나 여기서 명시적으로 조인의 사용을 보여줄 수 있습니다.
원래는 각각 2개의 셀, 3개의 행으로 구성된 테이블이 있었습니다. 그런 다음 사이트 로고를 배치하기 위해 첫 번째 행의 두 셀을 병합했습니다. 에 결론"지하실"을 배치하기 위해 동일한 작업을 수행했습니다.
덕분에 디자인 요소를 제자리에 배치할 수 있으며 한계를 넘어서는 것은 없습니다. 그것은 매우 편리하고 간단합니다. 그래서 인기가 많았습니다. div 태그는 이제 블록 생성에 권장됩니다.
결론
HTML 테이블에서 셀을 병합하려는 모든 작업을 수행할 수 있음을 기억하십시오. 그것은 모두 당신이 필요로하는 것과 그것을 준비하는 방법에 달려 있습니다. 가장 중요한 것은 혼동하지 마십시오. 많은 수의 조인이 있는 큰 테이블을 만들고 싶다면 먼저 종이나 그림판에 이 모든 것을 그리는 것이 좋습니다. 초보자의 경우 이 방법이 더 쉬울 것입니다.
경험을 쌓으면 머리로 쉽게 이러한 작업을 수행할 수 있습니다.