কীভাবে কেবলমাত্র <div> ট্যাগ এবং CSS ব্যবহার করে সারণী তৈরি করা যায়

182

আমি কেবল <div>ট্যাগ এবং সিএসএস ব্যবহার করে টেবিল তৈরি করতে চাই ।

এটি আমার নমুনা টেবিল।

<body>
  <form id="form1">
      <div class="divTable">
             <div class="headRow">
                <div class="divCell" align="center">Customer ID</div>
                <div  class="divCell">Customer Name</div>
                <div  class="divCell">Customer Address</div>
             </div>
            <div class="divRow">
                  <div class="divCell">001</div>
                <div class="divCell">002</div>
                <div class="divCell">003</div>
            </div>
            <div class="divRow">
                <div class="divCell">xxx</div>
                <div class="divCell">yyy</div>
                <div class="divCell">www</div>
           </div>
            <div class="divRow">
                <div class="divCell">ttt</div>
                <div class="divCell">uuu</div>
                <div class="divCell">Mkkk</div>
           </div>

      </div>
  </form>
</body>

এবং স্টাইল:

<style type="text/css">
    .divTable
    {
        display:  table;
        width:auto;
        background-color:#eee;
        border:1px solid  #666666;
        border-spacing:5px;/*cellspacing:poor IE support for  this*/
       /* border-collapse:separate;*/
    }

    .divRow
    {
       display:table-row;
       width:auto;
    }

    .divCell
    {
        float:left;/*fix for  buggy browsers*/
        display:table-column;
        width:200px;
        background-color:#ccc;
    }
</style>

তবে এই টেবিলটি আই 7 এবং নীচে সংস্করণ নিয়ে কাজ করে না lease দয়া করে আমার জন্য আপনার সমাধান এবং ধারণা দিন। ধন্যবাদ।

html  css 
— কুমারা
সূত্র
— টানাথোজ
32
আপনি divএকটি টেবিল তৈরি করতে কেন ব্যবহার করতে চান ?
— হুই
3
ভাল নিবন্ধ দেখুন 'সিএসএস টেবিলগুলি কি এইচটিএমএল টেবিলের চেয়ে ভাল?' [ Vanseodesign.com/css/tables/]
— ভ্লাদিমির
5
আমি মনে করি যে কেউ সাধারণ টেবিলের পরিবর্তে ডিভ ভিত্তিক টেবিলটি ব্যবহার করতে চায় তা হ'ল .... একটি ডিভ ভিত্তিক টেবিলের উপর রেন্ডারিং / অ্যানিমেশন / রিফ্লোগুলি আসলে একটি সাধারণ টেবিলের তুলনায় দ্রুততর (উদাহরণস্বরূপ, বড় ডিওএম আকারের জন্য) দ্রুততর হয়। ..... এটি দেখুন .... stubbornella.org/content/2009/03/27/… এটি .... বিকাশকারী.নোকিয়া. com/কমিনিউটি / উইকি / উপরে যে সমস্ত ডেটা নিবিড় জাভাস্ক্রিপ্ট প্লাগইন স্লিকগ্রিডের মতো ইত্যাদি divBasetable ব্যবহার করুন
— bhaya_w
1
@ হুয়াই সম্ভবত টেবিলের চেয়ে divএস আরও বেশি নমনীয় !
— কাই নোক

উত্তর:

262 
.div-table {
  display: table;         
  width: auto;         
  background-color: #eee;         
  border: 1px solid #666666;         
  border-spacing: 5px; /* cellspacing:poor IE support for  this */
}
.div-table-row {
  display: table-row;
  width: auto;
  clear: both;
}
.div-table-col {
  float: left; /* fix for  buggy browsers */
  display: table-column;         
  width: 200px;         
  background-color: #ccc;  
}

চলমান স্নিপেট:

কোড স্নিপেট দেখান

— শিব কমুরাভেলি
সূত্র
223
ধন্যবাদ! যে কেউ আসলে তার প্রশ্নের উত্তর দিয়েছিল এবং কেবল এটিই বলে না যে "এটি বোবা ধারণা" " লোকেরা প্রশ্নের উত্তর না দিলে আমি এটিকে ঘৃণা করি ... তিনি যদি এটি জিজ্ঞাসা করেন, তবে তার উত্তর দেওয়া উচিত
— ব্রায়ান লেশম্যান
23
@ স্টম্পেক্স: কখনও কখনও সঠিক উত্তর হয় "এটি করবেন না"। এটি সেই সময়ের এক। যখন আপনাকে "ডিভ এবং সিএসএস ব্যবহার করে আমি কীভাবে একটি টেবিল তৈরি করব" জিজ্ঞাসা করতে হয়, আপনার দুটি সমস্যার মধ্যে একটি রয়েছে: হয় আপনি ভুল প্রশ্ন জিজ্ঞাসা করছেন, বা আপনি ভুল জিনিসটি করার চেষ্টা করছেন।
— সিএইচও
28
@ সিএচওও যদি আপনি মনে করেন যে এটির উত্তর হওয়া উচিত তবে এটিকে উপেক্ষা করুন এবং যিনি আসলে প্রশ্নের উত্তর দিতে চান তাকে এর উত্তর দিন।
— ব্রায়ান লেশম্যান
14
@ স্টম্পেক্স: যদি আমি মনে করি যে প্রশ্নের উত্তর না দেওয়া উচিত তবে আমি ভোট দেওয়ার জন্য ভোট দেই - কারণ প্রশ্নটি এমনকি উপস্থিত নাও হওয়া উচিত। সমস্ত বৈধ প্রশ্ন একটি উত্তর প্রাপ্য। তবে আমি যেমন বলেছি, কখনও কখনও সবচেয়ে সঠিক উত্তর হয় "এটি করবেন না"। ভুল সমস্যার সমাধান কীভাবে কাউকে পরামর্শ দেওয়া ভাল? অন্যরা এই জাতীয় পরামর্শ দেওয়ার সময় অলসভাবে দাঁড়িয়ে থাকা কি ভাল ? আমি না বলেছি.
— সিএইচও
5
যদি আপনি না জানেন যে আপনার ডিজাইনারের মাথায় কী রয়েছে, উপরের মতো ডিভ স্ট্রাক্টে ডেটা রেখে যাওয়ার সময় তাদের টেবিলে রেখে দেওয়া আরও ভাল। আরও ভাল মানে বিপরীতে ভাসমান ডিভগুলি থেকে টেবিলগুলিতে রূপান্তর করা সহজ।
— অ্যানাটোলি টেকটোনিক
96

divগুলি টেবুলার ডেটার জন্য ব্যবহার করা উচিত নয়। লেআউটের জন্য সারণী ব্যবহার করার মতোই এটি ভুল।
ব্যবহার ক <table>। এটি সহজ, শব্দার্থগতভাবে সঠিক এবং আপনার 5 মিনিটের মধ্যে শেষ হয়ে যাবে।

— কবি
সূত্র
8
যদিও অ্যাপ্লিকেশন উপর নির্ভর করতে পারে। কখনও কখনও টেবুলার প্রদর্শিত হবে লিনিয়ার হতে পারে, যদিও বিভক্ত। উদাহরণস্বরূপ ক্যালেন্ডারগুলির পরিবর্তে টেবিলগুলির পরিবর্তে ডিভ হিসাবে তাদের সুবিধা থাকতে পারে
— ড্যান
2
@ ড্যান: একটি তালিকা হিসাবে তাদের সুবিধাগুলি থাকতে পারে , তবে একগুচ্ছ ডিভস শব্দার্থগতভাবে লেআউট টেবিলের মতোই খারাপ।
— সিএইচও
4
এমন অনেকগুলি কারণ রয়েছে যা আমরা ডিআইভি'র সাথে বিযুক্ত হওয়ার জন্য টেবিলের জন্য বলছি। যার মধ্যে একটি শেয়ার পয়েন্ট 2007-এ টেবিল ট্যাগ ব্যবহার করছে যা পৃষ্ঠাতে উপস্থিত প্রতিটি বিষয়বস্তু নিয়ে যায়
— শিব কমুরাভেলি
2
@ সিম্প্লিলেটগো: শব্দার্থকভাবে, টেবিলের মতো ডিভগুলি করার চেষ্টা করার চেয়ে টেবিলের ঘরগুলি ব্লক হিসাবে স্টাইল করা আরও উপযুক্ত appropriate
— সিএইচও
1
কেন না? আপনি যদি টেবিলগুলি ব্যবহার করেন তবে আপনি নির্দিষ্ট কক্ষগুলির চারপাশে কোনও স্ক্রোলবার যুক্ত করতে পারবেন না যাতে উদাহরণস্বরূপ আপনার টেবিলটিতে এক্সেলের মতো লক শিরোনাম থাকে। টেবিলগুলির অনেক সীমাবদ্ধতা রয়েছে, ডিভগুলি দিয়ে এটি করা যাবে না কেন?
— পিলভডজাইস
9

এটি একটি পুরানো থ্রেড, তবে আমি ভেবেছিলাম আমার সমাধান পোস্ট করা উচিত। আমি সম্প্রতি একই সমস্যার মুখোমুখি হয়েছি এবং যেভাবে সমাধান করেছি তা হ'ল নীচে বর্ণিত তিন-পদক্ষেপের পদ্ধতি অনুসরণ করা যা কোনও জটিল সিএসএস ছাড়াই খুব সহজ ।

(দ্রষ্টব্য: অবশ্যই, আধুনিক ব্রাউজারগুলির ক্ষেত্রে, সিএসএস বৈশিষ্ট্য প্রদর্শনের জন্য টেবিল বা টেবিল-সারি বা টেবিল-সেলগুলির মানগুলি ব্যবহার করা সমস্যার সমাধান করবে But তবে আমি যে পদ্ধতিটি ব্যবহার করেছি তা আধুনিক এবং পুরানো ব্রাউজারগুলিতে সমানভাবে কাজ করবে যেহেতু এটি নেই) সিএসএস বৈশিষ্ট্য প্রদর্শনের জন্য এই মানগুলি ব্যবহার করুন))

3-পদক্ষেপ সহজ পদ্ধতি

ডিভগুলি সহ টেবিলের জন্য কেবলমাত্র আপনি কোনও টেবিল উপাদানের মতো কোষ এবং সারি পেতে নিম্নলিখিত পদ্ধতিটি ব্যবহার করুন।

  1. টেবিল উপাদানটি একটি ব্লক ডিভের সাথে প্রতিস্থাপন করুন ( .tableশ্রেণিটি ব্যবহার করুন )
  2. প্রতিটি ত্রি বা তম উপাদানকে একটি ব্লক ডিভের সাথে প্রতিস্থাপন করুন ( .rowশ্রেণিটি ব্যবহার করুন )
  3. প্রতিটি টিডি উপাদানকে একটি ইনলাইন ব্লক ডিভের সাথে প্রতিস্থাপন করুন ( .cellশ্রেণিটি ব্যবহার করুন )

.table {display:block; }
.row { display:block;}
.cell {display:inline-block;}
    <h2>Table below using table element</h2>
    <table cellspacing="0" >
       <tr>
          <td>Mike</td>
          <td>36 years</td>
          <td>Architect</td>
       </tr>
       <tr>
          <td>Sunil</td>
          <td>45 years</td>
          <td>Vice President aas</td>
       </tr>
       <tr>
          <td>Jason</td>
          <td>27 years</td>
          <td>Junior Developer</td>
       </tr>
    </table>
    <h2>Table below is using Divs only</h2>
    <div class="table">
       <div class="row">
          <div class="cell">
             Mike
          </div>
          <div class="cell">
             36 years
          </div>
          <div class="cell">
             Architect
          </div>
       </div>
       <div class="row">
          <div class="cell">
             Sunil
          </div>
          <div class="cell">
             45 years
          </div>
          <div class="cell">
             Vice President
          </div>
       </div>
       <div class="row">
          <div class="cell">
             Jason
          </div>
          <div class="cell">
             27 years
          </div>
          <div class="cell">
             Junior Developer
          </div>
       </div>
    </div>
স্নিপেট প্রসারিত করুন

আপডেট 1

thatslchকোনও মন্তব্যে উল্লিখিত কলামের সমস্ত কক্ষ জুড়ে একই প্রস্থের প্রভাব বজায় না রাখার প্রভাব পেতে , নীচের দুটি পদ্ধতির যে কোনও একটি গ্রহণ করতে পারে।

  • cellশ্রেণীর জন্য প্রস্থ নির্দিষ্ট করুন

    ঘর {প্রদর্শন: ইনলাইন-ব্লক; প্রস্থ: 340px;}

  • আধুনিক ব্রাউজারগুলির সিএসএস নীচের মতো ব্যবহার করুন।

    .table {প্রদর্শন: টেবিল; row। {প্রদর্শন: টেবিল-সারি; cell। সেল {প্রদর্শন: টেবিল-ঘর;

— সুনীল
সূত্র
1
কলামগুলি একই আকারের না হওয়ায় এটি এটি করবে না।
— thatsIch
আপনার প্রস্থটি যেমন কোনও টেবিল উপাদানগুলির মতো আচরণ করে না সে সম্পর্কে আপনি ঠিক। যাইহোক, আপনি যদি এটি। এসএল {প্রস্থ: 300px; like এর মতো সিএসএসে। সেল শ্রেণীর জন্য কোনও প্রস্থ নির্দিষ্ট করে থাকেন তবে আপনিও অনুরূপ প্রভাব অর্জন করতে পারেন। তবে, আপনি সীমাবদ্ধতার যে সীমাবদ্ধতাটি উল্লেখ করেছেন সেগুলি ডিভ ব্যবহার করার সময় সর্বদা থাকবে যখন না আপনি সেল সিএসএস শ্রেণির জন্য কোনও প্রস্থ নির্ধারণ না করে। একই প্রভাব পাওয়ার অন্য কোনও পদ্ধতিতে নিম্নলিখিত ক্লাসগুলি ব্যবহার করা হবে: <স্টাইল> টেবিল {প্রদর্শন: টেবিল; row। {প্রদর্শন: টেবিল-সারি; cell। সেল {প্রদর্শন: টেবিল-ঘর;} </style> উপরের উত্তরে উল্লিখিত ক্লাসগুলি ব্যবহার না করে।
— সুনীল
@ থ্যাটস আইচ, আমি আমার উত্তরে 1 আপডেট যোগ করেছি যা আপনার উল্লিখিত প্রস্থ ইস্যুটির কার্যকারিতা ব্যাখ্যা করে
— সুনীল
4

আপনার যদি এমন কিছু থাকে যা <table>পছন্দ না করে তবে আপনি রিসেট ফাইলটি ব্যবহার করতে পারেন ?

অথবা

পৃষ্ঠার বিন্যাসের জন্য আপনার যদি এটির প্রয়োজন হয় তবে টেবিল ছাড়াই ওয়েবসাইট ডিজাইনের জন্য সিএসপ্লে লেআউট উদাহরণগুলি দেখুন ।

— উরসজুলা কারজেলেক
সূত্র
3

গ্রিড-সিএসএস বিবেচনা করে আমি কোনও উত্তর দেখছি না। আমি মনে করি এটি একটি খুব মার্জিত পদ্ধতির: গ্রিড-সিএসএস এমনকি সারি স্প্যান এবং কলামের স্প্যানগুলিকে সমর্থন করে। এখানে আপনি একটি খুব ভাল নিবন্ধ খুঁজে পেতে পারেন:

https://medium.com/@js_tut/css-grid-tutorial-filling-in-the-gaps-c596c9534611

— Zardo
সূত্র
2

সঠিক ডক প্রকার ব্যবহার করুন; এটি সমস্যার সমাধান করবে। আপনার এইচটিএমএল ফাইলের শীর্ষে নীচের লাইনটি যুক্ত করুন:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
— এ বি সি ডি
সূত্র
2

কিছুটা অফ-টপিক, তবে ক্লিনার এইচটিএমএল ... সিএসএসের জন্য কাউকে সহায়তা করতে পারে

.common_table{
    display:table;
    border-collapse:collapse;
    border:1px solid grey;
    }
.common_table DIV{
    display:table-row;
    border:1px solid grey;
    }
.common_table DIV DIV{
    display:table-cell;
    }

এইচটিএমএল

<DIV class="common_table">
   <DIV><DIV>this is a cell</DIV></DIV>
   <DIV><DIV>this is a cell</DIV></DIV>
</DIV>

ক্রোম এবং ফায়ারফক্সে কাজ করে

— হরিজ ক্রিটেনিস
সূত্র
2
এবং যদি আপনার টেবিল কোষগুলিতে সেগুলির <div>উপাদান থাকে? আপনি সম্ভবত চান.common_table div > div
— ভোলআরন
2

বিন্যাস ট্যাগগুলির একটি কাস্টম সেট তৈরি করতে গিয়ে আমি এই সমস্যার আর একটি উত্তর পেয়েছি। এখানে প্রদত্ত হ'ল ট্যাগগুলির কাস্টম সেট এবং তাদের সিএসএস ক্লাস।

এইচটিএমএল

<layout-table>
   <layout-header> 
       <layout-column> 1 a</layout-column>
       <layout-column>  </layout-column>
       <layout-column> 3 </layout-column>
       <layout-column> 4 </layout-column>
   </layout-header>

   <layout-row> 
       <layout-column> a </layout-column>
       <layout-column> a 1</layout-column>
       <layout-column> a </layout-column>
       <layout-column> a </layout-column>
   </layout-row>

   <layout-footer> 
       <layout-column> 1 </layout-column>
       <layout-column>  </layout-column>
       <layout-column> 3 b</layout-column>
       <layout-column> 4 </layout-column>
   </layout-footer>
</layout-table>

সিএসএস

layout-table
{
    display : table;
    clear : both;
    table-layout : fixed;
    width : 100%;
}

layout-table:unresolved
{
    color : red;
    border: 1px blue solid;
    empty-cells : show;
}

layout-header, layout-footer, layout-row 
{
    display : table-row;
    clear : both;   
    empty-cells : show;
    width : 100%;
}

layout-column 
{ 
    display : table-column;
    float : left;
    width : 25%;
    min-width : 25%;
    empty-cells : show;
    box-sizing: border-box;
    /* border: 1px solid white; */
    padding : 1px 1px 1px 1px;
}

layout-row:nth-child(even)
{ 
    background-color : lightblue;
}

layout-row:hover 
{ background-color: #f5f5f5 }

খালি ঘর এবং কোষগুলি সাধারণ আকারে সঠিক আকারে পাওয়ার জন্য কী, বক্স-সাইজিং এবং প্যাডিং। বর্ডার একই জিনিসটি করবে তবে সারিতে একটি লাইন তৈরি করবে। প্যাডিং না। এবং, আমি এটি চেষ্টা না করার পরে, আমি মনে করি মার্জিন প্যাডিংয়ের মতো একইভাবে কাজ করবে, জোর করে এবং খালি ঘরটি সঠিকভাবে রেন্ডার করাতে।

— ই নেট আর্ক
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.