Beginner Web Developer: How to create borders for Table Rows

StackOverflow https://stackoverflow.com/questions/23139052

  •  05-07-2023
  •  | 
  •  

Question

I'm a beginner web developer and am learning how to create tables. I need a table with a border around the table and borders around each individual row (there are 6 rows). The table needs to look like this:

Here is my code right now:

<!DOCTYPE html>

<html>

<head>
<style type="text/css">
<!--
table, tr, td  {border: 1px solid;
               padding: 4px;
               border-color: 628ECC;
               }
tr             {border: 1 px solid;
                border-color:628ECC;
               }
-->
</style>

<meta charset="utf-8" />
<title>RMHCTable</title>

</head>

<body>

<header>
  <nav>
  </nav>
</header>

<section>
  <aside>
  </aside>

<article>

<h1 style=font-family:"Futura">Gift Options and Benefits</h1>

<table>

<tr class="first row">
<td>Type of Gift</td>
<td>Income to Donor</td>
<td>Taxation of Income</td>
<td>Benefits to Donor</td>
<td>Value to the St. Louis<br>Ronald McDonald House</td>
</tr>

<tr>
<td>1. Cash or Security</td>
<td>None</td>
<td>None</td>
<td>Tax deduction on the current market<br> value. Avoidance of capital gains tax<br>
on appreciated security.</td>
<td>Immediate receipt of cash<br> or security gift.</td>
</tr>

<tr>
<td>2. Bequest in Will</td>
<td>N/A</td>
<td>N/A</td>
<td>Desired estate distribution.<br> Reduced estate taxes.</td>
<td>Receipt of bequest at death<br>of donor.</td>
</tr>

<tr>
<td>3. Charitable Gift Annuity</td>
<td>Fixed amount based on<br>actuarial tables.</td>
<td>Portion of income<br> is non-taxable.</td>
<td>Substantial tax deduction in year of<br>gift. Reduced capital gains tax.</td>
<td>Property contributed;<br>activated as financial<br>benefit at death</td>
</tr>

<tr>
<td>4. Charitable<br>Remainder Trust<br>Annuity or Unitrust</td>
<td>Fixed income or variable income based on annual value of Trust</td>
<td>Income taxable<br>based on annual<br>income.</td>
<td>Initial income tax deduction based<br>on the market value of the gift,<br>
reduced by factors from the IRS<br>
which determine value of the life estate.<br>No capital gains tax.</td>
<td>Receipt of charitable<br>remainder at death.</td>
</tr>

<tr>
<td>5. Life Insurance<br>Policy</td>
<td>None</td>
<td>None</td>
<td>Tax decuctions on premiums paid,<br>dividend assigned, cash or replacement<br>
value. Avoidance of probate, estate/<br>inheritance taxes.</td>
<td>Receiipt of donor financial<br>benefits at death or<br>liquidation of policy.</td>
</tr>

<tr>
<td>6. Gift of Persoanl<br>Residence</td>
<td>N/A</td>
<td>N/A</td>
<td>Immediate tax decution for value<br>of remainder</td>
<td>Ownership of farm or<br>residence at death of<br>life tenants.</td>
</tr>

</table>

</article>

</section>
  <footer>
  </footer>

</body>
</html>

I've been having trouble understanding style sheets in general. I understand inline styles but have been having trouble with CSS.

Was it helpful?

Solution

So you can't set border properties on a row. The important CSS here is:

table {
    border-collapse: collapse; /* this is pretty straight forward 
                                  but it collapses each of the individual
                                  cell borders into each other */
    border: 1px solid black; /* this puts the border around the whole table */
}

td {
    border-bottom: 1px solid black; /* this puts the bottom border on each row */
    padding: 10px; /* this could be set to anything but gives your table a little spacing. */
}

I hope this helps. See http://jsfiddle.net/RF5jC/ for demo.

OTHER TIPS

<tr> tags are extremely restrictive when it comes to styling them so you need something like this:

table{
    border:solid 1px #000000; // give a border to the entire outside
    border-collapse:collapse; // tell the cells to merge their borders so that you do not get double-width inter-borders where one <td> touches another <td>
}
td{
    border-top:solid 1px #000000; // the table already has a border all around so tell the <td>s to only apply a top border
}

JSFiddle Demo

You may try to use box-shadow : DEMO 

tr             {
    box-shadow:0 0 0 1px red;
               }

You may as well declare correctly colors: 628ECC is #628ECC

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top