List & Table

Table of contents

1. List basic
   1. What is list?
   2. Features of List
   3. Basic form of list
2. List elements
   1. <ol>
   2. <ul>
   3. <dl>
3. Table basic
   1. What is table?
   2. Basic form of table
4. Table elements
   1. <table>
   2. <tr>
   3. <th>
   4. <td>
   5. <caption>
5. Table Accessibility

List basic

What is list?

목차를 만드는 태그

Features of List

▸ Can be nested

▸ 다른 요소들을 포함할 수 있음

▸ 웹 접근성을 위해 네비게이션처럼 동일항목이 2개이상 중복된다면 거의 다 쓰인다

Basic form of list

* Ordered list
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol> 

* Unordered list
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

* Description List
<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

List elements

<ol>

Ordered list

• type attribute : define the numbering type (1, A, a, I, i)

• start attribute : control list counting

    <ol start="50">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ol>
  
    <ol type="I" start="50">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ol>
  

<ul>

Unordered list

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<dl>

Description Lists

• <dl> : description list

• <dt> : defines a term

• <dd> : describes the term

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

Table basic

What is table?

표를 만드는 테그

▸ 문법 []안에는 속성값, >뒤에는 하위값, *개수, +동일 항목 더하기

Basic form of table

<table style="width:100%">
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
</table>

Table elements

<table>

표

• attribute

  ▸ border

  ▸ cellpadding

  ▸ cellspacing

  ▸ bgcolor

  ▸ width

<tr>

table row(열)

• attribute

  ▸ height

  ▸ bgcolor

  ▸ align

<th>

table header

▸ 기본 CSS : bold, centered

• attribute : td attribute과 동일

<td>

table data/cell

▸ can contain all sorts of HTML elements; text, images, lists, other tables, etc.

▸ 기본 CSS : regular, left-aligned

• attribute

  ▸ width

  ▸ height

  ▸ bgcolor

  ▸ align (left, center, right)

  ▸ valign (top, middle, bottom)

  ▸ colspan

  ▸ rowspan

<caption>

caption to a table

Note

Table Accessibility