473,698 Members | 1,877 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

how to create table based structure using div tag

254 Contributor

I want to create table based structure but without using table tag. I want to use div tag. How can I do that?
Apr 8 '08 #1
5 75482
490 Recognized Expert Contributor
Firstly define what you mean by a table based structure.

If you want a table based structure (like a grid of data) then surely you would use a table.

If your talking about for layout, then you would use CSS.
Apr 8 '08 #2
254 Contributor
Firstly define what you mean by a table based structure.

If you want a table based structure (like a grid of data) then surely you would use a table.

If your talking about for layout, then you would use CSS.
No I am talking about layout then how could I do it?
Apr 8 '08 #3
490 Recognized Expert Contributor
Heres a good article

Apr 8 '08 #4
3 New Member
Heres a good article
Yeah, getting the 5/box-3/col set with fixed heights is trivially easy. Try getting 'equal columns' if you don't fix the height, however. That's the challenge. It's been so for many years, and is well known. How to get a table /grid without any table tags, using only css?

What happens is that the columns only go down as far as the content pushes them, much like the old NN not responding to cell/column widths if there wasn't enough text in the cell. One can provide a common background and give the impression of full length and equal columns. But try to color one column, try to color the shortest column, and one instantly sees the problem with css, used that way.

But it's an old way with the arrival of FF 2 and Opera 9. Sure IE6 is out of luck, here. But IE6, good for its day, is subject to TOO MANY hack-arounds as it is.

In FF and Opera, you simply use the CSS2 table stylings. Now, admittedly, these are presently designed to work with HTML table tags. But that said - two will work just with any element. These are display: table-row and display: table-cell. You can even make up your own element name, or just use class.

First, the way one might have done it, before, and that works in IE6. It's limited. Even FF didn't seem to like the percentage column widths. So fixed widths are used for the columns. One floats left. The middle has left and right margins to keep it out of right and left columns. And the right column is positioned absolutely to the right border. Since the columns don't expand vertically, a common background is used for all three columns. Here the footer attaches to the middle column. It could be assumed that the middle will always be the tallest. But should either the left or right have more content and become taller, then the footer will still cling to the bottom of the middle column, and will overlap the longest column in an ugly way. It's a lot of compromises, assumptions. But in this way, it works.

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <title>CSS 'equal columns'</title>
  5. <style>
  7. .containdiv {
  8. width: 100%;
  9. display: block;
  10. border: 1px solid #000;
  11. background: #afa;
  12. }
  14. .col {
  15. padding: 1em;
  16. }
  18. .col1 {
  19. float: left;
  20. width: 200px;
  21. }
  23. .col2 {
  24. display: block;
  25. top: 0;
  26. margin-left: 220px;
  27. margin-right: 230px;
  28. }
  30. .col3 {
  31. width: 200px;
  32. position: absolute;
  33. right: 0;
  34. top: 0;
  35. }
  37. .ftr SPAN, .hdr SPAN {
  38. display: block;
  39. padding: 0.5em;
  40. }
  42. .hdr {
  43. border-left: 1px solid #000;
  44. border-top: 1px solid #000;
  45. background: #ffa;
  46. }
  48. .ftr {
  49. border-left: 1px solid #000;
  50. border-bottom: 1px solid #000;
  51. border-top: none;
  52. clear: left;
  53. background: #ffa;
  54. }
  56. </style>
  57. </head>
  58. <body>
  59. <div class="containdiv">
  61. <div class="hdr">
  62. <span style="text-align:center;">Header</span>
  63. </div>
  65. <div style="position:relative;width:100%;">
  66. <span class="col col1">some text</span>
  68. <span class="col col2"> In the second Oration, delivered next day, he dwells on the Sacrament of Baptism and its spiritual effects; and takes occasion to reprove the then still prevalent practice of deferring Baptism till the near approach of death. He likewise dwells on the truth that the validity and spiritual effect of the Sacrament is wholly independent of the rank or worthiness of the Priest who may minister it
  69. </span>
  71. <span class="col col3">some text</span>
  72. </div>
  74. <div class="ftr">
  75. <span style="text-align:center;clear:both;">Footer</span>
  76. </div>
  78. </div>
  79. </body>
  80. </html> 
So that's for IE, FF and Opera. It should work in all three. However, if one wanted separate colors in each column, one would be out of luck in IE6. So here's the change, using table-cell from CSS2. All one does is substitute the following rules for the same rules above. Try it.

Expand|Select|Wrap|Line Numbers
  1. .containdiv {
  2. width: 100%;
  3. display: block;
  4. border: 1px solid #000;
  5. }
  7. .col {
  8. padding: 1em;
  9. display: table-cell;
  10. }
  12. .col1 {
  13. width: 10%;
  14. background: #dde;
  15. }
  17. .col2 {
  18. background: #ede;
  19. }
  21. .col3 {
  22. width: 10%;
  23. background: #edd;
  24. }
Now, all of a sudden, it looks like a table. Full-floating. Percentage widths. Each cell full height. Each cell has its own color. And each cell is full top to bottom, touching header and footer. Again, won't work in IE6. But one would presume that this just above would be in the main external stylesheet. And those previously that worked in IE6 would be in whatever 'iefix' stylesheet that is separately loaded in. Everyone does that, these days. IE6 is the 'downscale' browser that requires some fix-up and touch-up. So one would just include the first col and container styles in the iefix stylesheet, and it would display with all the compromises, but the same HTML would display properly (after a fashion) in IE6.
Apr 8 '08 #5
490 Recognized Expert Contributor
Sevry just about got more detail that i would've given! Bookmarking for next time!
Apr 9 '08 #6

Sign in to post your reply or Sign up for a free account.

Similar topics

by: J West | last post by:
Warning: Error while executing this query:CREATE TABLE "purchaseorder" ( "PurchaseOrderID" int(10) unsigned NOT NULL auto_increment, "PurchaseCost" double unsigned zerofill NOT NULL default '0000000000000000000000', "PurchaseDescription" varchar(255) character set latin1 collate latin1_bin NOT NULL default '', "PurchaseeBayReference" varchar(45) default NULL, "PurchaseNotes" varchar(255) NOT NULL default '', "PurchasePicture" mediumblob...
by: rong.guo | last post by:
Greetings! I am now doing one type of analysis every month, and wanted to creat table names in a more efficient way. Here is what happens now, everytime I do the analysis, I will create a table called something like customer_20050930, and then update the table by using several update steps. Then next month I will create a table called customer_20051031. Does anyone know if there is a better way to do it? like using a macro variable...
by: Bruce | last post by:
I want to create a new table based on an existing table, but I don't want the tables to have any enforced relationship. Is this possible without having to do a CREATE TABLE and an INSERT? create table customer_Temp as (select credit_Card_number, personal_id_number from customer) DATA INITIALLY DEFERRED REFRESH deferred; refresh table customer_temp;
by: Alicia | last post by:
Does anyone know why I am getting a "Syntax error in Create Table statement". I am using Microsoft Access SQL View to enter it. Any other problems I may run into? CREATE TABLE weeks ( weekstart datetime not null primary key, weekend datetime not null )
by: Peter Nurse | last post by:
For reasons that are not relevant (though I explain them below *), I want, for all my users whatever privelige level, an SP which creates and inserts into a temporary table and then another SP which reads and drops the same temporary table. My users are not able to create dbo tables (eg dbo.tblTest), but are permitted to create tables under their own user (eg MyUser.tblTest). I have found that I can achieve my aim by using code like...
by: dave.j.thornton | last post by:
I'm attempting to create a new table, and populate it using the fields from two existing tables. The code is printed below. I get the error: "Run-time error '-2147217900 (80040e14)': Syntax error in CREATE TABLE statement." For what it's worth, when tested independently, the "SELECT " part of my CREATE TABLE statement works properly. Sub test() Dim cmd As ADODB.Command Set cmd = New ADODB.Command
by: ramseyscripts | last post by:
I have Table A that is displayed through a form. Table A can be filtered through the form to create a subset of Table A records. How can I create a new table, Table B, with only the records in the filtered subset of Table A?
by: remya1000 | last post by:
I have a field called Departments in my database. and I have 3 monitors. So when Page_Load, I need to check number of departments I have in database. And depends upon that number of departments I have, I need to calculate number of checkbox I need to display. NumCheckBox = NumDepartments * 3 And then I need to create a table like structure with 4 fields. First column -Department Name and remaining 3 columns will be Monitor 1-3. and...
by: furqi | last post by:
hi every one my question is that i actually want to make a table in a database and update delete the recordsin that table The thing is that i dont want to make the database table in the sql server but i want to make it in the visual web developer (the editor i am using) can any body gimme any idea abt how i can do this orany link regarding to this i shall be very thankful tou you and waiting for hte reply regards furqi
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.