在容器中的表下添加文本

时间:2014-01-05 02:26:05

标签: html css html-table

给出以下HTML,其中列出了慈善捐赠者名单和顶部的标题。我想在容器底部添加慈善机构的名称。我是HTML的新手,我这是我的第一个任务。

CSS代码:

/*** central column on page ***/
div #divContainer {
    max-width: 50%;
    margin: 0 auto;
    font-family: Verdana;
    padding: 1em 1em 1em 1em;
    /* rounded corners */
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    /* add gradient */
    background-color: #908080;
    background: -webkit-gradient (linear, left top, left bottom, from(#606060), to(#C65C65));
    background: -moz-linear-gradient (top, #606060, #998880);
    /* add box shadows */
    -moz-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}
/*** Donner Role ***/
 table.CRG {
    align="center";
    vertical-align="center";
    text-align:center;
    border:3px solid black;
    border-collapse:collapse;
}
/*** table's td element, all section ***/
 table.CRG td {
    color:white;
    vertical-align:middle;
    padding: 0.5em;
    border:3px solid black;
    font-weight:bold;
}
 h1 {
    color:#FFE47A;
    font-size:1.5em;
 }

HTML CODE:

    <!-- CENTTERED COLUMN ON THE PAGE-->
<div id="divContainer">
    <!-- HTML5 TABLE FORMATTED VIA CSS3-->
    <table class="CRG" width="100%">
        <!-- TABLE BODY: MAIN CONTENT from Function CRG -->
        <tbody>
             <h1><center> My Charity </center> </h1>

            <tr>
                <td>Mr. Smithn</td>
            </tr>
            <tr>
                <td>Mr. Jones</td>
            </tr>
            <tr>
                <td>Mrs. Generous</td>
            </tr>
            <tr>
                <td>Reserved</td>
            </tr>
            <tr>
                <td>Reserved</td>
            </tr>
            <tr>
                <td>Reserved</td>
            </tr>
            <tr>
                <td>Reserved</td>
            </tr>
            <tr>
                <td>Reserved</td>
            </tr>
        </tbody>
    </table>
</div>

1 个答案:

答案 0 :(得分:0)

有很多方法可以解决这个问题......太多而不能放在一个帖子里。这里只是一些一般性的想法。虽然您的数据是“表格式”,但我不会关注表格,但其他选项 - 暗指“旧锯” - 不要使用表格进行布局,将它们用于表格数据。

divs,使用类或伪类:

<div class='headerdiv'></div>
<div class='donordiv'></div>
<div class='donordiv'></div>
<div class='donordiv'></div>
<div class='donordiv'></div>
<div class='donordiv'></div>
<div class='donordiv'></div>
<div class='footerdiv'></div>

未编号的列表 - 使用类或伪类的样式。

<ul>
  <li class='headerlist'>
    <ul>
      <li class='donor'>donor1</li>
      <li class='donor'>donor2</li>
      <li class='donor'>donor3</li>
      <li class='donor'>donor4</li>
    </ul>
  </li>
  <li class='footerstuff'>footer stuff</li>
</ul>

如果您喜欢dls,dts等,请再次使用css类或伪类进行样式化。

<dl>
  <dt>Title</dt>
    <dd>donor 1</dd>
    <dd>donor 2</dd>
    <dd>donor 3</dd>
    <dd>donor 4</dd>
  <dt>Stuff</dt>
</dl>

我敢打赌,专家们会向我们展示许多其他方式。