Publicado em por cearacultural

Tabela com cantos arredondados usando CSS




Aprenda como criar…

Neste post vamos aprender a criar Tabela com os cantos arredondados, totalmente formatada com CSS, diferente das outras técnicas que fazem esse efeito através de imagens.

Bom! Primeiramente, vamos criar nossa página

<html>
<head>
<title>Tabela com cantos arredondados – CSS</title>
<meta charset=”utf-8″>

            <h3><strong>Fazer o login…</strong></h3>
            <form id=”form_login” name=”form_login” method=”post”>
              <table width=”100%” border=”0″ cellpadding=”0″ cellspacing=”4″ class=”tabela500″>
                <tr>
                  <td width=”30%” height=”25″ align=”right” valign=”middle” nowrap=”nowrap” style=”font-size:14px; font-weight:bold;”>Usu&aacute;rio (e-mail):</td>
                  <td align=”left” valign=”middle”><input name=”lg_email” type=”text” class=”Email” id=”lg_email”></td>
                </tr>
                <tr>
                  <td height=”25″ align=”right” valign=”middle” style=”font-size:14px; font-weight:bold;”>Senha:</td>
                  <td align=”left” valign=”middle”><input type=”password” name=”lg_senha” id=”lg_senha”></td>
                </tr>
                <tr>
                  <td height=”40″ align=”right” valign=”middle”>&nbsp;</td>
                  <td align=”left” valign=”middle”><input name=”entrar” type=”button” class=”inputbox” id=”entrar” value=”Entrar”></td>
                </tr>
              </table>
            </form>
</body>
</html>
Figura de Tabela com Bordas Arredondadas

Agora vamos criar o Estilo CSS.

<Style>
.tabela500 {
background-color: #FFDFDF;
height: auto;
width: 500px;
border-right-width: medium;
border-bottom-width: medium;
border-right-style: solid;
border-bottom-style: solid;
border-right-color: #CCC;
border-bottom-color: #CCC;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
</Style>

Agora, basta você inserir esse código CSS entre as TAGs <head> e </head>
da página, e alterar as propriedades de acordo com a sua página, como:
background-color: Cor de Funda da Tabela
height:  Altura da Tabela. Quer dizer que independente da quantidade de linhas ele vai acompanhar
width:  Largura da Tabela. Aqui eu fixei em 500 pixels, mas se usar 100% ou auto funciona
border-right-width:  Espessura da Borda Direita da Tabela (efeito Sombra)
border-bottom-width: Espessura da Borda Inferior da Tabela (efeito Sombra)
border-right-style: Estilo da Borda Direita da Tabela (efeito Sombra)
border-bottom-style: Estilo da Borda Inferior da Tabela (efeito Sombra)
border-right-color: Cor da Borda Direita da Tabela (efeito Sombra)
border-bottom-color: Cor da Borda Inferior da Tabela (efeito Sombra)
-moz-border-radius: Mesmo que border-radius para Browsers tipo Mozilla
-webkit-border-radius: Mesmo que border-radius para Browsers tipo WebKit
 border-radius: Ângulo (em Pixels) do Arredondamento da Tabela

 

Não esqueça de Curtir e/ou Compartilhar… agradeço imensamente!

 

Compartilhe com os amigosShare on Facebook
Facebook
Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin
Pin on Pinterest
Pinterest

Uma resposta para “Tabela com cantos arredondados usando CSS”

  1. Agradeço imensamente a todos que deixam comentários e elogios no blog. Peço porém a quem deseja alguma resposta mais rápida entrar em contato por e-mail usando a aba Contato, pois devido a quantidade de comentários nos diversos artigos do blog, muitas vezes pode demorar até que eu chegue ao seu comentário.
    Muito obrigado.

    Thank you so much to all who leave comments and compliments on the blog. But I would ask anyone who wants a quicker response to contact us by email using the Contact tab, because due to the amount of comments in the various articles in the blog, it can often take until I get to your comment.
    Thank you very much.

Deixe um comentário