H5 학습 여정-H5 양식 (7)-H5 튜토리얼-php.cn

H5 학습 여정-H5 양식 (7)

黄舟

풀어 주다： 2017-02-17 14:27:22

원래의

1912명이 탐색했습니다.

테이블 구문

테이블: 재개 테이블

captian: 테이블 제목

번째: 테이블 행 헤더

tr: 테이블 행

td: 셀

thead: 테이블 머리글

tfoot: 테이블 바닥글

tbody: 테이블 본문

col: 열

속성! ! ! 코드 예

제목이 있는 테이블

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>H5表格</title></head><body>
    <p>表格</p>
   <table border="1">
       <caption>表格</caption>
       <tr>
           <th>单元</th>
           <th>单元</th>
           <th>单元</th>
       </tr>
       <tr>
           <td>单元格1</td>
           <td>单元格2</td>
           <td>单元格3</td>
       </tr>
       <tr>
           <td>单元格1</td>
           <td>单元格2</td>
           <td>单元格3</td>
       </tr>
   </table></body></html>

로그인 후 복사

렌더링

H5 학습 여정-H5 양식 (7)

레이블이 있는 테이블

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>H5表格</title></head><body>
    <p>表格</p>
   <table border="1">
       <caption>表格</caption>
       <tr>
           <th>单元</th>
           <th>单元</th>
       </tr>
       <tr>
           <td>
               <ul>
                   <li>香蕉</li>
                   <li>香蕉</li>
                   <li>香蕉</li>
               </ul>
           </td>
           <td>我要吃药</td>
       </tr>
   </table></body></html>

로그인 후 복사

렌더링

H5 학습 여정-H5 양식 (7)

셀 내부 여백

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>H5表格</title></head><body>
    <p>表格</p>
   <table border="1">
       <caption>表格</caption>
       <tr>
           <th>单元</th>
           <th>单元</th>
       </tr>
       <tr>
           <th>单元</th>
           <th>单元</th>
       </tr>
   </table>
    <br/>
    <table border="1" cellpadding="10">
        <caption>表格</caption>
        <tr>
            <th>单元</th>
            <th>单元</th>
        </tr>
        <tr>
            <th>单元</th>
            <th>单元</th>
        </tr>
    </table></body></html>

로그인 후 복사

렌더링

H5 학습 여정-H5 양식 (7)

셀 추가 여백

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>H5表格</title></head><body>
    <p>表格</p>
   <table border="1">
       <caption>表格</caption>
       <tr>
           <th>单元</th>
           <th>单元</th>
       </tr>
       <tr>
           <th>单元</th>
           <th>单元</th>
       </tr>
   </table>
    <br/>
    <table border="1" cellspacing="10">
        <caption>表格</caption>
        <tr>
            <th>单元</th>
            <th>单元</th>
        </tr>
        <tr>
            <th>单元</th>
            <th>单元</th>
        </tr>
    </table></body></html>

로그인 후 복사

렌더링

H5 학습 여정-H5 양식 (7)

셀 배경색을 bgcolor로 설정, 배경 이미지를 배경으로 설정

테이블 구문

테이블: 테이블 재개

captian: 테이블 제목

th: 테이블 행 헤더

tr: 테이블 행

td: 셀

thead: 테이블 헤더

tfoot: 테이블 바닥글

tbody: 테이블 본문

col: 열 속성

! ! ! 코드 예

제목이 있는 테이블

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>H5表格</title></head><body>
    <p>表格</p>
   <table border="1">
       <caption>表格</caption>
       <tr>
           <th>单元</th>
           <th>单元</th>
           <th>单元</th>
       </tr>
       <tr>
           <td>单元格1</td>
           <td>单元格2</td>
           <td>单元格3</td>
       </tr>
       <tr>
           <td>单元格1</td>
           <td>单元格2</td>
           <td>单元格3</td>
       </tr>
   </table></body></html>

로그인 후 복사

렌더링

H5 학습 여정-H5 양식 (7)

레이블이 있는 테이블

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>H5表格</title></head><body>
    <p>表格</p>
   <table border="1">
       <caption>表格</caption>
       <tr>
           <th>单元</th>
           <th>单元</th>
       </tr>
       <tr>
           <td>
               <ul>
                   <li>香蕉</li>
                   <li>香蕉</li>
                   <li>香蕉</li>
               </ul>
           </td>
           <td>我要吃药</td>
       </tr>
   </table></body></html>

로그인 후 복사

렌더링

H5 학습 여정-H5 양식 (7)

셀 안쪽 여백

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>H5表格</title></head><body>
    <p>表格</p>
   <table border="1">
       <caption>表格</caption>
       <tr>
           <th>单元</th>
           <th>单元</th>
       </tr>
       <tr>
           <th>单元</th>
           <th>单元</th>
       </tr>
   </table>
    <br/>
    <table border="1" cellpadding="10">
        <caption>表格</caption>
        <tr>
            <th>单元</th>
            <th>单元</th>
        </tr>
        <tr>
            <th>单元</th>
            <th>单元</th>
        </tr>
    </table></body></html>

로그인 후 복사

렌더링

H5 학습 여정-H5 양식 (7)

셀 바깥쪽 여백

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>H5表格</title></head><body>
    <p>表格</p>
   <table border="1">
       <caption>表格</caption>
       <tr>
           <th>单元</th>
           <th>单元</th>
       </tr>
       <tr>
           <th>单元</th>
           <th>单元</th>
       </tr>
   </table>
    <br/>
    <table border="1" cellspacing="10">
        <caption>表格</caption>
        <tr>
            <th>单元</th>
            <th>单元</th>
        </tr>
        <tr>
            <th>单元</th>
            <th>单元</th>
        </tr>
    </table></body></html>

로그인 후 복사