CSS: <table border="border"> equivalent - html

Question

I have two different tables and on the second table I want to apply the border="border" atttribute as CSS. How can accomplish this correctly?
<table>
<!-- Text widgets for the customer's name and address -->
<tr>
<td>Buyer's Name:</td>
<td>
<input type="text" name="name" size="30" />
</td>
</tr>
<tr>
<td>Street Address:</td>
<td>
<input type="text" name="street" size="30" />
</td>
</tr>
<tr>
<td>City, State, Zip:</td>
<td>
<input type="text" name="city" size="30" />
</td>
</tr>
</table>
<table class="tableProduct">
<!-- First, the column headings -->
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
</tr>
<!-- Now, the table data entries -->
<tr>
<td>Unpopped Popcorn (1 lb.)</td>
<td>$3.00</td>
<td class="tdcenter">
<input type="text" name="unpop" size="3" />
</td>
</tr>
<tr>
<td>Caramel Popcorn (2 lb. canister)</td>
<td>$3.50</td>
<td class="tdcenter">
<input type="text" name="caramel" size="3" />
</td>
</tr>
<tr>
<td>Caramel Nut Popcorn (2 lb. canister)</td>
<td>$4.50</td>
<td class="tdcenter">
<input type="text" name="caramelnut" size="3" />
</td>
</tr>
</table>
I tried creating the classs tableProduct with the following:
.tableProduct {
border: 1px solid black;
border-collapse: collapse;
}
But it just creates a border around the table. I want it to create a border within each cell.

Answer 1

Here we go ... you weren't that far from it
.tableProduct {
border-collapse: collapse;
}
.tableProduct th, /* this line is for the headers */
.tableProduct td {
border: 1px solid black;
}
<table>
<!-- Text widgets for the customer's name and address -->
<tr>
<td>Buyer's Name:</td>
<td>
<input type="text" name="name" size="30" />
</td>
</tr>
<tr>
<td>Street Address:</td>
<td>
<input type="text" name="street" size="30" />
</td>
</tr>
<tr>
<td>City, State, Zip:</td>
<td>
<input type="text" name="city" size="30" />
</td>
</tr>
</table>
<table class="tableProduct">
<!-- First, the column headings -->
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
</tr>
<!-- Now, the table data entries -->
<tr>
<td>Unpopped Popcorn (1 lb.)</td>
<td>$3.00</td>
<td class="tdcenter">
<input type="text" name="unpop" size="3" />
</td>
</tr>
<tr>
<td>Caramel Popcorn (2 lb. canister)</td>
<td>$3.50</td>
<td class="tdcenter">
<input type="text" name="caramel" size="3" />
</td>
</tr>
<tr>
<td>Caramel Nut Popcorn (2 lb. canister)</td>
<td>$4.50</td>
<td class="tdcenter">
<input type="text" name="caramelnut" size="3" />
</td>
</tr>
</table>

Answer 2

You need to apply the styling to the th and td elements as well.
table, th, td {
   border: 1px solid black;
}
You can read up on table styling more here.

Answer 3

table.tableProduct td {
border: 1px black solid;
border-collapse: collapse;
}
That will put a border around all of your table datas individually.
For good measure, you might want to add border-collapse in there. That way you're looking at one solid border, instead of two competing border lines - one from the table and one from the table data.
Edit: With css Combinators! By putting a space between table.tableProduct and td, we're saying, please apply these CSS rules to all td elements that a descendants of a table element with the class tableProduct.