728x90
반응형
asf
Tabel Element
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>table Element</title> <style> table, th, td { border: 1px solid black; } th, td { padding: 10px; } </style> </head> <body> <figcaption style = text-align:center;>국내에서 자주 사용하는 <b>모던 브라우저</b></figcaption> <figcaption>국내에서 자주 사용하는 <b>모던 브라우저</b></figcaption> <figure> <table style ="margin-right: auto"> <tr> <th>브라우저</th> <th>제조업체</th> <th>다운로드</th> </tr> <tr> <td style="text-align: center"><b>크롬(Chrome)</b></td> <td>Google</td> <td>https://www.google.com/chrome/</td> </tr> <tr> <td style="text-align: center"><b>파이어폭스(Firefox)</b></td> <td>Mozilla</td> <td>https://www.mozilla.org/ko/firefox/</td> </tr> <tr> <td style="text-align: center"><b>엣지(Edge)</b></td> <td>Microsoft</td> <td>https://www.microsoft.com/</td> </tr> </table> <figcaption>국내에서 자주 사용하는 <b>모던 브라우저</b></figcaption> </figure> </body> </html>
Tabel Element
<!DOCTYPE html> <html> <head> <title>Table Element</title> <style> table { width: 100%; border-collapse: collapse; } th, td { border-bottom: 1px solid black; padding: 8px 8px; } th { background-color: gray; text-align: left; color: white; } </style> </head> <body> <h1>HTML Table</h1> <table> <tr> <th width="40%"><b>Company</b></th> <th width="30%"><b>Contact</b></th> <th><b>Country</b></th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Austria</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>UK</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Canada</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Italy</td> </tr> </table> </body> </html>
| <col> | width, background-color만 가능 인라인 설정값 우선시함 |
| <table> <colgroup> <col span="2" width="20%" /> <col span="2" style="background-color: yellow" ; /> </colgroup> </colgroup> |
<colgroup>
<col> width, background-color만 가능
<!DOCTYPE html> <html> <head> <style> table { width: 100%; border: 1px solid gray; } td { border: 1px solid gray; text-align: left; font-weight: bold; } </style> </head> <body> <table> <caption> colgroup 연습 </caption> <colgroup> <col span="2" width="20%" /> <col span="2" style="background-color: yellow" ; /> </colgroup> <tr> <td width="20%">1</td> <td width="20%">2</td> <td style="background-color: blue">3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> </table> </body> </html>
colgroup
<!DOCTYPE html> <html> <head> <style> table { width: 80%; border-collapse: collapse; } th, td { border-top: 1px solid black; border-bottom: 1px solid black; } </style> </head> <body> <table> <h1>테이블만들기</h1> <tr> <th>제목1</th> <th>제목2</th> <th>제목3</th> <th>제목4</th> </tr> <tr> <td>1-1</td> <td>1-2</td> <td>1-3</td> <td>1-4</td> </tr> <tr> <td>2-1</td> <td>2-2</td> <td>2-3</td> <td>2-4</td> </tr> </table> <table style="margin-top: 50px"> <colgroup> <col span="4" style="border:1px solid black"> </colgroup> <tr> <th>제목1</th> <th colspan="2">제목2</th> <th>제목3</th> </tr> <tr> <td>1-1</td> <td>1-2</td> <td>1-3</td> <td>1-4</td> </tr> <tr> <td>2-1</td> <td>2-2</td> <td>2-3</td> <td rowspan="4">2-4</td> </tr> <tr> <td>3-1</td> <td>3-2</td> <td>3-3</td> </tr> <tr> <td>4-1</td> <td>4-2</td> <td>4-3</td> </tr> </table> </body> </html>
728x90
반응형
'[HTML]' 카테고리의 다른 글
| [HTML] id, #, anchor, svg (0) | 2024.02.15 |
|---|---|
| [HTML] a tag, href, bookmark (0) | 2024.02.14 |
| [HTML] Table border, element, colspan, rowspan (0) | 2024.02.14 |
| [HTML] LIST (0) | 2024.02.13 |
| 서식태그, LIST (0) | 2024.02.13 |