[JavaScript] 배열 내용을 테이블로 출력 (32일차)

문제

해당 배열의 내용을 테이블로 출력하시오.

    var arr = [
        { name: '홍길동', java: 90, oracle: 95, html: 85, addr: '서울' },
        { name: '옥한빛', java: 76, oracle: 80, html: 70, addr: '인천' },
        { name: '귀살대', java: 81, oracle: 75, html: 80, addr: '부산' },
        { name: '김철수', java: 87, oracle: 99, html: 98, addr: '제주도' },
        { name: '유재석', java: 85, oracle: 85, html: 90, addr: '서울' }
    ];

 

 

▶ 코드

<script>
    var arr = [
        { name: '홍길동', java: 90, oracle: 95, html: 85, addr: '서울' },
        { name: '옥한빛', java: 76, oracle: 80, html: 70, addr: '인천' },
        { name: '귀살대', java: 81, oracle: 75, html: 80, addr: '부산' },
        { name: '김철수', java: 87, oracle: 99, html: 98, addr: '제주도' },
        { name: '유재석', java: 85, oracle: 85, html: 90, addr: '서울' }
    ];

    document.write("<table><tread>");
    document.write("<tr><th>이름</th><th>주소</th><th>자바</th><th>오라클</th><th>HTML</th></tr>");
    document.write("</thred><tbody>");
    for (var i = 0; i < arr.length; i++) {
        document.write("<tr><td>" + arr[i].name + "</td><td>" + arr[i].addr + "</td>" + "</td><td>"
            + arr[i].java + "</td>" + "</td><td>" + arr[i].oracle + "</td>" + "</td><td>" + arr[i].html + "</td></tr>");
    }
    document.write("</tbody></table>");
</script>

// 위 코드를 보기 편하게 정리한 코드
<script>
    document.write("<table><tread>");
    document.write("<tr>");
    document.write("<th>이름</th>");
    document.write("<th>주소</th>");
    document.write("<th>자바</th>");
    document.write("<th>오라클</th>");
    document.write("<th>HTML</th>");
    document.write("</tr></tread><tbody>");
    for (var i = 0; i < arr.length; i++) {
        document.write("<tr>");
        document.write("<td>" + arr[i].name + "</td>");
        document.write("<td>" + arr[i].addr + "</td>");
        document.write("<td>" + arr[i].java + "</td>");
        document.write("<td>" + arr[i].oracle + "</td>");
        document.write("<td>" + arr[i].html + "</td>");
        document.write("</tr>");
    }
    document.write("</tbody></table>");
</script>

    <style>
        table, tr, th, td {
            border: 1px solid black;
            border-collapse: collapse;
            padding: 15px;
            text-align: center;
        }
    </style>

 

 

▶ 출력 결과