Como girar o texto de uma tabela em HTML

Escrito por matthew burley | Traduzido por diogo angelim
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como girar o texto de uma tabela em HTML
Como girar o texto de uma tabela em HTML (Comstock/Comstock/Getty Images)

O HTML é uma linguagem usada para criar e manipular objetos de uma página da web. Quando combinada com CSS e outras linguagens, é possível exibir praticamente qualquer coisa em um navegador. A estrutura do código pode ser estabelecida de várias formas, sendo que uma delas é através de tabelas. Usando-as para definir a posição dos elementos da página, é possível girar o texto dentro de uma célula.

Nível de dificuldade:
Moderadamente desafiante

Instruções

  1. 1

    Abra a página da web onde você deseja girar um texto.

  2. 2

    Crie uma tabela com uma célula adicionando o texto "<table><tr><td>xxxxxx</td></tr></table>" em algum lugar entre as tags "<body>" e "</body>". Substitua "xxxxxx" pelo texto que deseja girar.

  3. 3

    Adicione uma classe e um filtro do Internet Explorer para o elemento "<td>". Por exemplo: "<td class="rotation" style="filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);">xxxxxx</td>".

  4. 4

    Crie uma classe CSS entre as tags "<head>"e "</head>" da sua página: "<style type="text/css">.rotation {display: block;-webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg); }</style>".

  5. 5

    Salve sua página e, em seguida, abra-a em um navegador para verificar se o texto foi girado corretamente. Se você deseja mudar o ângulo de rotação, ajuste os elementos "(-90deg)" da classe CSS de acordo. Você também precisará mudar a propriedade de rotação do filtro do Internet Explorer para 0, 1, 2 ou 3 para girar o texto a 0, 90, 180 ou 270 graus, respectivamente.

Dicas & Advertências

  • Você também pode girar os elementos contidos entre as tags "" e "" usando o mesmo processo.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível