CODEWITHSUNDEEP
htmlcsshtml-table
AmirHussein
AmirHussein

Reputation: 96

How to include a div in table

I'm going to put a div inside a table tag but it doesn't work.

<table>
<div id="account" style="border: 1px solid red;">
    <tr>
        <td>ایمیل قبلی:</td>
        <td><input type="text" name="oldmail" /></td>

        <td>ایمیل جدید:</td>
        <td><input type="text" name="newmail" /></td>

        <td>ایمیل تایید:</td>
        <td><input type="text" name="newmail2" /></td>
    </tr>
    <tr>
        <td>پسورد قبلی:</td>
        <td><input type="text" name="oldpass" /></td>

        <td>پسورد جدید:</td>
        <td><input type="text" name="newpass" /></td>

        <td>پسورد تایید:</td>
        <td><input type="text" name="newpass2" /></td>
    </tr>
</div>
</table>

http://jsfiddle.net/uJSuR/

How can I fix it?

Upvotes: 1

Views: 122

Answers (4)

MahanGM
MahanGM

Reputation: 2382

You might want something like this:

<table>
  <tr id="account" style="border: 1px solid red;">
    <td>
      <table>
        <tr>
          <td>ایمیل قبلی:</td>
          <td><input type="text" name="oldmail" /></td>
          <td>ایمیل جدید:</td>
          <td><input type="text" name="newmail" /></td>
          <td>ایمیل تایید:</td>
          <td><input type="text" name="newmail2" /></td>
        </tr>
        <tr>
          <td>پسورد قبلی:</td>
          <td><input type="text" name="oldpass" /></td>

          <td>پسورد جدید:</td>
          <td><input type="text" name="newpass" /></td>

          <td>پسورد تایید:</td>
          <td><input type="text" name="newpass2" /></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Upvotes: -1

Danield
Danield

Reputation: 125433

You could use The CSS table model

Here are the equivalent Html elements to css properties (from the above w3.org link)

table    { display: table }
tr       { display: table-row }
thead    { display: table-header-group }
tbody    { display: table-row-group }
tfoot    { display: table-footer-group }
col      { display: table-column }
colgroup { display: table-column-group }
td, th   { display: table-cell }
caption  { display: table-caption }

Upvotes: 1

Christopher Marshall
Christopher Marshall

Reputation: 10736

http://jsfiddle.net/uJSuR/1/

<table id="account" style="border: 1px solid red;">
    <tr>
        <td>ایمیل قبلی:</td>
        <td><input type="text" name="oldmail" /></td>

        <td>ایمیل جدید:</td>
        <td><input type="text" name="newmail" /></td>

        <td>ایمیل تایید:</td>
        <td><input type="text" name="newmail2" /></td>
    </tr>
    <tr>
        <td>پسورد قبلی:</td>
        <td><input type="text" name="oldpass" /></td>

        <td>پسورد جدید:</td>
        <td><input type="text" name="newpass" /></td>

        <td>پسورد تایید:</td>
        <td><input type="text" name="newpass2" /></td>
    </tr>
</table>

or put your styles on the tr, It's a little unclear on what you're trying to accomplish.

tr {
   border: 1px solid red;
}

Upvotes: 1

AmirHussein
AmirHussein

Reputation: 96

Actually after some searches I knew I should change div tag to tbody tag. thank you for your answers.

Upvotes: 0

Related Questions