Html head titletitulo da paginatitle head body 15

This preview shows page 27 - 32 out of 53 pages.

<HTML> <HEAD> <TITLE>Titulo da Pagina</TITLE> </HEAD> <BODY> 15. TABELAS
Image of page 27
STI - Seção Técnica de Informática HTML 28 <TABLE BORDER> <TR> <TD>Linha 1 Coluna 1</TD> <TD>Linha 1 Coluna 2</TD> <TD>Linha 1 Coluna 3</TD> </TR> <TR> <TD>Linha 2 Coluna 1</TD> <TD>Linha 2 Coluna 2</TD> <TD>Linha 2 Coluna 3</TD> </TR> <TR> <TD>Linha 3 Coluna 1</TD> <TD>Linha 3 Coluna 2</TD> <TD>Linha 3 Coluna 3</TD> </TR> </TABLE> </BODY> </HTML> Este código gera a seguinte tabela: Note que, na tag <TABLE> , existe a opção Border . É ela que cria a borda que envolve as células da tabela. Se você não a especificar, a tabela é montada normalmente, porém sem a borda. Agora, faremos um exemplo que mostra o uso da opção COLSPAN , isto é, faz com que a célula ocupe colunas adjacentes. Note que o conteúdo desta célula está centralizado pelo comando ALIGN. <HTML> <HEAD> <TITLE>Titulo da Pagina</TITLE> </HEAD> <BODY> <TABLE BORDER> <TR> <TD>Linha 1 Coluna 1</TD> <TD ALIGN=center COLSPAN=2>Linha 1 Coluna 2-3</TD> <TD>Linha 1 Coluna 4</TD> </TR> <TR> <TD>Linha 2 Coluna 1</TD> <TD>Linha 2 Coluna 2</TD> <TD>Linha 2 Coluna 3</TD> <TD>Linha 2 Coluna 4</TD> </TR> <TR> <TD>Linha 3 Coluna 1</TD> <TD>Linha 3 Coluna 2</TD> <TD>Linha 3 Coluna 3</TD> <TD>Linha 3 Coluna 4</TD> </TR>
Image of page 28
STI - Seção Técnica de Informática HTML 29 O próximo exemplo, mostra o uso da opção ROWSPAN para aumentar o tamanho de uma célula e fazer com que ela ocupe linhas adjacentes. Note que o conteúdo desta célula está alinhado pelo comando VALIGN=top. <HTML> <HEAD> <TITLE>Titulo da Pagina</TITLE> </HEAD> <BODY> <TABLE BORDER> <TR> <TD>Linha 1 Coluna 1</TD> <TD>Linha 1 Coluna 2</TD> <TD>Linha 1 Coluna 3</TD> </TR> <TR> <TD>Linha 2 Coluna 1</TD> <TD rowspan=2>Linhas 2-3 Coluna 2</TD> <TD>Linha 2 Coluna 3</TD> </TR> <TR> <TD>Linha 3 Coluna 1</TD> <TD>Linha 3 Coluna 3</TD> </TR> </TABLE> </BODY> </HTML> Veja o efeito desse código: </TABLE> </BODY> </HTML> Este código gera a seguinte tabela:
Image of page 29
STI - Seção Técnica de Informática HTML 30 15.2. Alterando as bordas da tabela A criação de bordas pode ser útil em muitas tabelas, porém elas não são necessárias em muitos casos. Você viu até agora várias tabelas que usaram uma borda gerada pela edição da opção BORDER ao comando <TABLE>. O próximo exemplo, mostra três tabelas onde são especificados os valores 10 e 5 para a borda e outra em que nenhum valor para borda foi especificado. <HTML> <HEAD> <TITLE>Titulo da Pagina</TITLE> </HEAD> <BODY> <TABLE BORDER=10> <TR> <TD>Linha 1 Coluna 1</TD> <TD>Linha 1 Coluna 2</TD> </TR> <TR> <TD>Linha 2 Coluna 1</TD> <TD>Linha 2 Coluna 2</TD> </TR> <TR> <TD>Linha 3 Coluna 1</TD> <TD>Linha 3 Coluna 2</TD> </TR> </TABLE> <TABLE BORDER=5> <TR> <TD>Linha 1 Coluna 1</TD> <TD>Linha 1 Coluna 2</TD> </TR> <TR> <TD>Linha 2 Coluna 1</TD> <TD>Linha 2 Coluna 2</TD> </TR> <TR> <TD>Linha 3 Coluna 1</TD> <TD>Linha 3 Coluna 2</TD> </TR> </TABLE> <TABLE> <TR> <TD>Linha 1 Coluna 1</TD> <TD>Linha 1 Coluna 2</TD> </TR> <TR> <TD>Linha 2 Coluna 1</TD>
Image of page 30
STI - Seção Técnica de Informática HTML 31 <TD>Linha 2 Coluna 2</TD> </TR> <TR> <TD>Linha 3 Coluna 1</TD> <TD>Linha 3 Coluna 2</TD> </TR> </TABLE> </BODY> </HTML> Veja o resultado: Você pode criar uma tabela sem bordas para montar um menu onde as opções não fiquem unicamente na vertical, como é o caso quando você usa os comandos para a criação de listas.
Image of page 31

Want to read all 53 pages?

Image of page 32

Want to read all 53 pages?

You've reached the end of your free preview.

Want to read all 53 pages?

  • Summer '16
  • Jung
  • Advanced Math, arquivo HTML, Seção Técnica

{[ snackBarMessage ]}

Get FREE access by uploading your study materials

Upload your study materials now and get free access to over 25 million documents.

Upload now for FREE access Or pay now for instant access
Christopher Reinemann
"Before using Course Hero my grade was at 78%. By the end of the semester my grade was at 90%. I could not have done it without all the class material I found."
— Christopher R., University of Rhode Island '15, Course Hero Intern

Ask a question for free

What students are saying

  • Left Quote Icon

    As a current student on this bumpy collegiate pathway, I stumbled upon Course Hero, where I can find study resources for nearly all my courses, get online help from tutors 24/7, and even share my old projects, papers, and lecture notes with other students.

    Student Picture

    Kiran Temple University Fox School of Business ‘17, Course Hero Intern

  • Left Quote Icon

    I cannot even describe how much Course Hero helped me this summer. It’s truly become something I can always rely on and help me. In the end, I was not only able to survive summer classes, but I was able to thrive thanks to Course Hero.

    Student Picture

    Dana University of Pennsylvania ‘17, Course Hero Intern

  • Left Quote Icon

    The ability to access any university’s resources through Course Hero proved invaluable in my case. I was behind on Tulane coursework and actually used UCLA’s materials to help me move forward and get everything together on time.

    Student Picture

    Jill Tulane University ‘16, Course Hero Intern