3 - Introdução ao Desenvolvimento Web - Listas e Tabelas

6
HTML A alma da internet Prof. Mauro Duarte

Transcript of 3 - Introdução ao Desenvolvimento Web - Listas e Tabelas

Page 1: 3 - Introdução ao Desenvolvimento Web - Listas e Tabelas

HTMLA alma da internet

Prof. Mauro Duarte

Page 2: 3 - Introdução ao Desenvolvimento Web - Listas e Tabelas

02/03/15

Conteúdos do site <ul> <ol> <li>

...

<body>

<ul><li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

<li>Item 4</li>

<li>Item 5</li>

<li>Item 6</li>

</ul>

</body>

● Este conjunto de tags definem listas

● Sendo <ul> para listas com marcadores

● <ol> para listas numeradas

● <li> para itens da lista.

Page 3: 3 - Introdução ao Desenvolvimento Web - Listas e Tabelas

02/03/15

Conteúdos do site <ul> <ol> <li>

...

<body>

<ol><li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

<li>Item 4</li>

<li>Item 5</li>

<li>Item 6</li>

</ol>

</body>

● Este conjunto de tags definem listas

● Sendo <ul> para listas com marcadores

● <ol> para listas numeradas

● <li> para itens da lista.

Page 4: 3 - Introdução ao Desenvolvimento Web - Listas e Tabelas

02/03/15

Conteúdos do site Tabelas

<body>

<table border=”1”>

<tr><td>Item</td>

<td>Item</td>

<td>Item</td>

<td>Item</td>

</tr>

</table>

</body>

● As tabelas são iniciadas pela tag <table>

● Cada linha da tabela é marcada pela tag <tr>

● A linha é dividida em células pela tag <td>

Page 5: 3 - Introdução ao Desenvolvimento Web - Listas e Tabelas

02/03/15

Conteúdos do site Tabelas

<body>

<table>

<tr><th>Nome</th>

<th>Número</th>

<th>Turma</th>

<th>Nota</th>

</tr>

</table>

</body>

● As tabelas são iniciadas pela tag <table>

● Cada linha da tabela é marcada pela tag <tr>

● A linha é dividida em células pela tag <td>

● Os títulos são marcados com a tag <th>.

Page 6: 3 - Introdução ao Desenvolvimento Web - Listas e Tabelas

02/03/15

Conteúdos do site Tabelas

<body>

<table>

<tr><th>Nome</th>

<th>Número</th>

<th>Turma</th>

<th>Nota</th>

</tr>

</table>

</body>

● As tabelas são iniciadas pela tag <table>

● Cada linha da tabela é marcada pela tag <tr>

● A linha é dividida em células pela tag <td>

● Os títulos são marcados com a tag <th>.