How to make this layout using only tables?

Hi there

this is my jsfiddle

I want to shift content here block from away then other “td” but that was not working although rowspan is working fine but colspan is not working How can I give space to content here only using tables attributes?

Thanks

Why don’t you want to use css?

You could then just add padding to the td (table.classname td (padding: 5px 10px)).

Using old style table attributes you would need to add the cellspacing or cellpadding attributes to the table tag.

e.g.

<table cellpadding="10">

You have an extra opening <td> with rowspan in it. Remove it.

I think your expectations of how the attributes “colspan” and “rowspan” work are incorrect.

The code, as written, cannot work properly.

There are not 100 columns to “colspan”, and there seems to be no reason to span 4 rows. If we presume that all rows should have the same number of cells, then the middle bunch of rows are missing one cell. If we presume that the third cell is supposed to extend down 8 rows, then that top cell 3 should have rowspan 8 assigned.
This is a guess:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>template</title>
<!--
http://www.sitepoint.com/community/t/how-to-make-this-layout-using-only-tables/194728
vngx
-->
    <style type="text/css">

td {outline:1px dotted blue;}

    </style>
</head>
<body>

<table>
    <tr>
        <td>StudentId</td>
        <td class="studentId">ID Here</td>
        <td rowspan="8">Content is Here</td>
    </tr>
    <tr><td>First Name</td><td class="studentFirstName">First Name Here</td></tr>
    <tr><td>Last Name</td><td class="studentLastName">Last Name Here</td></tr>
    <tr><td>Gender</td><td class="studentGender">Gender Here</td></tr>
    <tr><td>Mobile</td><td class="studentMobile">Mobile Here</td></tr>
    <tr><td>Email</td><td class="studentEmail">Email Here</td></tr>
    <tr><td>Courses</td><td class="studentCourses">Courses Here</td></tr>
    <tr><td>Address</td><td class="studentAddress">Address Here</td></tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td>Edit</td>
        <td>Change Password</td>
    </tr>
</table>

</body>
</html>

With the “content” column, this really does not look like something that belongs in a table. Perhaps if the table were separate…
</speculation>

1 Like

Q. When is a table not a table?
A. When it is another element displayed as a table.
Get the layout you want while retaining semantics.
css

table{ width: 100%;}
.table  {
    display: table;
    width: 90%;
    margin: 0 auto;
    }
.cell    {display: table-cell;

}

html

<body>
    <div class="table">
        <div class="cell">
            <table>
                <tr><td>StudentId</td><td class="studentId">ID Here</td>
                <tr><td>First Name</td><td class="studentFirstName">First Name Here</td></tr>
                <tr><td>Last Name</td><td class="studentLastName">Last Name Here</td></tr>
                <tr><td>Gender</td><td class="studentGender">Gender Here</td></tr>
                <tr><td>Mobile</td><td class="studentMobile">Mobile Here</td></tr>
                <tr><td>Email</td><td class="studentEmail">Email Here</td></tr>
                <tr><td>Courses</td><td class="studentCourses">Courses Here</td></tr>
                <tr><td>Address</td><td class="studentAddress">Address Here</td></tr>
            </table>
        </div>
        <p class="cell">Content is Here</p>
    </div>
    <div class="table"><span class="cell">Edit</span><span class="cell">Change Password</span></div>
</body>
1 Like

cellpadding spilt all spaces

I don’t want pace between cells
I want space between content here block and others

Using the same html as my earlier example. Adding padding to the cell class. The actual table remains the same, but the other elements displayed as table get spaced out.

table   {
    width: 100%;
}
.table  {
    display: table;
    width: 90%;
    margin: 0 auto;
    }
.cell    {
    display: table-cell;
    border: dashed 1px #d00;    /*Border for illustrative purpose only*/
    padding: 1em;   /*Added this for spacing*/
}
td {outline:1px dotted blue;}    /*Border for illustrative purpose only*/

suppose I want some space between table block and content here
but not between table block and Edit and Change Password

then how will it work

If I try to Increase the padding then it will adding padding to all cell class

How can I acheive this?

Change

padding:2em;

to

padding:0 2em;

this has been worked for me

Now I need Content Here block to only split to till only 5 row

How can I do this?

Please draw a picture of how this is supposed to look when it is finished.

1 Like

any tool suggestion for drawing? :wink:

GIMP is free for Windows. Or Paint. Or Photoshop, if you have that.

As You Can see when I add a New Image then block display Up and down

I want to align both of them with each other

How to do this?

both block should be in front of each other

I am still not clear about what you are trying to achieve, but one comment about your code: your use of the <img> tag is incorrect. It should not have both opening and closing tags. It should be a single tag, the content defined by the src attribute.
If you want text over an image, use a css background for the element with the text…

I have changed my code

Removed tag but still Images are going up and “myInfo” block is displacing down.I want then align with each other left and right

I hope know you got my point

Try adding this:

.cell    {
vertical-align:top;
}

You are missing the class .cell for the image, maybe wrap it in a <div class="cell"><img></div>

Thanks
@PaulOB
@SamA74

Now its working fine

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.