ex03.html.JSP

바보·2023년 5월 11일

JSP

목록 보기
5/18

Table

  • 테이블 스타일
<style>
	table {
    	border-collapse;
    }
	th, td {
    	border: 1px solid black;
        padding: 10px;
    }
</style>
테이블은 그 자체로는 별 의미가 없고
속성을 줘야지 테이블로 만들어진다

cell의 간격을 조절하기 위해 cellspacing 속성을 쓰고
표 안의 여백을 주기 위해서 cellpadding 속성을 쓴다

아래의 코드에서 작성되는 노란 줄들은 CSS로 그려라는 것을 의미하고
html로 해도 상관없지만 개발이 중지되서
CSS를 권장한다.
쓰는 방법은 위의 테이블 스타일<style></style> 안에 속성을 쓰는 것이다
(벨로그에는 안뜨지만 이클립스로 작성하면 노란줄이 뜸! cell~ 부분들)



table : 표를 생성하는 태그
<tr></tr>tr : table row. 테이블 한 줄(= 행)을 생성
<td></td>td : table data. 테이블의 한 칸(= 열)을 생성
<th></th>th : tavle headline. 주로 열 제목에 사용.
가운데 정렬되며 폰트가 두껍게 출력됨

ㄴ 나중에는 데이터 베이스에 있는걸 띄운다는데?
지금 배운게 없쨘닝~? 그래서 그냥 적으라고함 ㅠㅠ



<table border="1" cellspacing="0" cellpadding="10">
  <tr>
    <th>이름</th>
    <th>나이</th>
    <th>주소</th>
  </tr>
  
  <tr>
    <td>홍길동</td>
    <td>26세</td>
    <td>부산 광역시 오구오구</td>
  </tr>
  
  <tr>
    <td>김진호</td>
    <td>17세</td>
    <td>서울 특별시 방구방구</td>
  </tr>
  
  --------------------------------
  
<p>rowspan : 위 아래 칸을 합친다</p>
  
  <tr>
    <td rowspan="2">이민지</td>
    <td>31세</td>
    <td>대전 광역시 발동동</td>
  </tr>
  
  --------------------------------
  
<p>colspan : 좌 우 칸을 합친다
  
  <tr>
    <td colspan="2">010-1234-5679</td>
  </tr>
  
  --------------------------------
  
</table>


ㄴ 아래의 사진으로 표를 보면 이렇게 나옴


유튜브 영상 가져오기

뜬금없지만 가져오게 되었다
왜냐하면 html은 여기서 끝이기 때문이다ㅠㅠ

그냥 유튜브가서 주소를 복사해서 들고오면 된다..

<iframe width="759" height="427"
	src="https://www.youtube.com/embed/26xp8qmSM84?autoplay=1&mute=1"
	title="눈을 왜 그렇게 떠? 카페 기싸움 ASMR" frameborder="0"
	allow="accelerometer; autoplay; clipboard-write;
	encrypted-media; gyroscope; picture-in-picture;web-share"
	allowfullscreen></iframe>

크기는 줄였지만 저기 오토플레이 부분을 만지면 자동재생이 된댱
    
iframe은 테이블안에 테이블이라고
액자같은것이고 두개를 동시에 재생도 가능하다
    

<br>... 후기 ㅠㅠ

밑에 적으면 벨로그에서는 마지막으로 인식해서
글이 이상하게 나온다...

뭐 여튼

html 안녕 재밌었엉~!
이제 두근거리는 Java시간이양

profile
바보는 타이핑으로 공부하자

0개의 댓글