Mudar a cor do contorno TD com HTML ou CSS

Tenho um pequeno problema em mudar uma cor de fronteira. A minha mesa é algo assim.
<table>
    <div id="one">
        <tr>
            <td></td>
            <td></td>
        </tr>
    </div>
    <div id="two">
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </div>
</table>
Quero que o primeiro seja branco e o segundo seja azul. Eu tentei com

#one td, #one tr,#onetable{
border: 1px solid white;  
border-color:#ff0000;
Mas não funcionou. Ideia Ty

 10
Author: avrahamcool, 2013-10-04

5 answers

<style type="text/css">
    table {
        border-collapse: collapse;
    }
    #one td {
        border: 1px solid #ff0000; 
    }
</style>

<table>
    <tr id="one">
        <td></td>
        <td></td>
    </tr>
    <tr id="two">
        <td></td>
        <td></td>
    </tr>
</table>
 11
Author: Ravi Chauhan, 2015-02-17 13:58:48
<style type="text/css">
    #one td {
        border: 1px solid #ff0000; 
    }
</style>

<table>
    <tr id="one">
        <td></td>
        <td></td>
    </tr>
    <tr id="two">
        <td></td>
        <td></td>
    </tr>
</table>

Http://jsfiddle.net/VCA9Q/

 6
Author: Irfan TahirKheli, 2015-02-17 13:56:02
Aqui está.
<html>
<head>
<style>
    body {background-color: beige;}
    table {border-collapse: separate;}
    table td { width: 50px; height: 50px;}
    table tr:first-child td {border: 1px solid #fff; }
    table tr:last-child td {border: 1px solid #0000FF; }
</style>
</head>
<body>    
    <table>
    <tr>
      <td></td><td></td><td></td>
    </tr>
    <tr>
      <td></td><td></td><td></td>
    </tr>
    </table>
</body>
</html>

E um violino

(btw #0000FF é azul)

 2
Author: jenson-button-event, 2013-10-04 14:36:32

Se quiser dar uma risca à sua mesa:

table td {
    border-width: 1px;
    border-style: solid;
}
table tr:nth-child(odd) td {
    border-color: #fff;
}
table tr:nth-child(odd) td {
    border-color: #00f;
}

Js Fiddle demo .

Note que, se você quiser duas células na primeira linha, e três na Segunda, você deve usar o atributo colspan no seu HTML (no primeiro ou, como na demonstração abaixo, no segundo elemento td):

<table>
    <tr>
        <td></td>
        <td colspan="2"></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

Js Fiddle demo .

Referências:

 2
Author: David Thomas, 2013-10-04 14:46:02

CSS

table{
    background:#000;
}

tr#one{
    background:blue;
}

tr#two{
    background:red;
}

tr td{
    background: inherit;
}

HTML

  <body>
    <table>
        <tr id='one'>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr id='two'>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>
  </body>
 1
Author: user2320601, 2013-10-04 14:38:49