자기개발/빅데이터_R과 파이썬

Html의 Table 작성하기

안박 2022. 11. 1. 20:20

1. 일단, 원활한 실습을 위해 크롬으로 브라우저 환경 전환하기 

 

2. 원하는 칸 만큼 표 누르기 (TR: 행, TD: 열)

 - 첫줄만 <th>로 시작할 수 있음

 - border  테이블라인

 - collapse  테이블 내 여백

 - text-align: center 표 가운데 정렬

 

3. 열차시간표 만들기 

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>KTX Rail Tickets Reservation</title>
 <style>
 table, tr, th, td {
 border: solid 1px black;
 border-collapse: collapse;
 padding: 8px;
 text-align: center
 }
 </style>
 </head>
 <body>
 <h3> <strong><font size="" color="#3366ff">KTX 열차 시간표</font></strong> </h3>
 <table>
 <tr>
<th>departure</th> 
<th>arrive</th> 
<th>room</th> 
<th>fare</th> 
 </tr>
 <tr>
<td>Seoul(05:00)</td>
<td>Busan(09:40)</td>
<td>economy</td>
<td>50,800</td>
 </tr>
 <tr>
<td>Seoul(10:00)</td>
<td>Busan(16:00)</td>
<td>prestige</td>
<td>83,700</td>
 </tr>
 <tr>
<td>Seoul(18:15)</td>
<td>Busan(20:50)</td>
<td>economy</td>
<td>50,800</td>
 </tr>
 </table>
 </body>
</html>

4. 연습해보기

https://www.w3schools.com/tags/tag_table.asp

 

HTML table tag

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

5. 표합치기 rowspan // colspan 활용하여 일기예보 표 만들기

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Weather Forcast</title>
 <style>
 table, tr, th, td {
 border: solid 1px black;
 border-collapse: collapse;
 padding: 8px;
 text-align: center
 }
 </style>
 </head>
 <body>
 <h3> <strong><font size="" color="#3366ff">일기예보</font></strong> </h3>
 <table>
 <tr>
<th colspan='2'>DAY</th>
<td>WEATHER</td>
<td>WIND DIRECTION</td>
<td>WIND SPEED(m/s)</td>
 </tr>
 <tr>
<td>24(MON)</td>
<td>AFTERNOON</td>
<td><img src="https://c-fa.cdn.smule.com/rs-s36/arr/0f/92/14f8cecb-d434-4448-95d5-a43ee7852c72.jpg"width='50' height='50'></td>
<td>South-SW</td>
<td>3~7</td>
 </tr>
 <tr>
<td rowspan='2'>25(TUE)</td>
<td>MORNING</td>
<td><img src="https://w7.pngwing.com/pngs/47/593/png-transparent-rain-weather-forecasting-computer-icons-rain-blue-cloud-weather-icon.png"width='50' height='50'></td>
<td>West-NW</td>
<td>3~6</td>
 </tr>
 <tr>
<td>AFTERNOON</td>
<td><img src="https://w7.pngwing.com/pngs/47/593/png-transparent-rain-weather-forecasting-computer-icons-rain-blue-cloud-weather-icon.png"width='50' height='50'></td>
<td>NW-West</td>
<td>3~6</td>
 </tr>
 </table>
 </body>
</html>

file:///D:/EditPlus%20v5.1%20Build%201778%20Portable%20(1)/EditPlus%20v5.1%20Build%201778%20Portable/Data/Temp/non98BB.htm

 

 

 

 

6. tbody로 응용하기 

https://www.w3schools.com/tags/tag_tbody.asp

 

HTML tbody tag

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com