Table in CSS

Tables in HTML can become much more beautiful thanks to CSS.

Borders for tables in CSS

To create a border for a CSS table, use the border property.The following example shows the use of black borders for elements, and.

 table, th, td { 
  border : 1px solid black ; 
 }

Note that in the example on the double-edged table, both the table and the elements and have their own borders.

Merge the table border

The border-collapse feature is used to combine table borders into a single border.

 table { 
  border-collapse : collapse ; 
 } 
 
 table, th, td { 
  border : 1px solid black ; 
 }

If you want a single border around the table, use only the border property.

 table { 
  border : 1px solid black ; 
 }

Width and height of the board

The width and height of the table are determined by the width and height characteristics.The example below sets the width of the table to 100% and the height of the element is 50px.

 table { 
  width : 100% ; 
 } 
 
 th { 
  height : 50px ; 
 }

Align the table position horizontally

The text-align feature is used to align the table horizontally (left, right, middle) of the contents, or.By default the content in the element will be centered and the contents will be left justified.

The example below aligns the text in the element.

 th { 
  text-align : left ; 
 }

Align the table vertically

Features vertical-align used to align the table vertically (top, bottom, middle) of content in and.Default content will be centered.

The following example is just below the element

 td { 
  height : 50px ; 
  vertical-align : bottom ; 
 }

Padding in the table

To control the distance between the border and the content in the table, use the padding property for the element and

 th, td { 
  padding : 15px ; 
  text-align : left ; 
 }

Divide the table horizontally

Features border-bottom for and use

 th, td { 
  border-bottom : 1px solid #ddd ; 
 }

Table in CSS Picture 1
For example with a division of 1px

Table in CSS Picture 2
For example with a 10px split

Hover over the table

Use the: hover selection tool to emphasize the table row when hovering over.

 tr:hover { background-color : #ffff00 ;}

Table in CSS Picture 3
The row is highlighted when hovering over

Stripe board

To create a 2-color stripe, use the tool to select nth-child () and the background color with backgroud-color.

 tr:nth-child(even) { background-color : #f2f2f2 ;}

Table in CSS Picture 4
The board has 2 color stripes

Add color to the board

The example below defines the background color and text color for the element

 th { 
  background-color : #4CAF50 ; 
  color : white ; 
 }

Table in CSS Picture 5
For example, create colors for the background and text in the table

The table is highly responsive (responsive table)

A highly responsive table has a scroll bar to display the full content when the screen is too small.To do this, you add a container element (like

) with overflow-x: auto around the element.

Table in CSS Picture 6
Scroll bar to see the entire table content

Note that on OS X LIon, the default scroll bar is hidden and only appears when used (even if you have overflow: scroll pre-set).

Previous post: List in CSS

The following article: Display element in CSS

CSS

Isabella Humphrey

Update 25 May 2019

You should read it

May be interested

Navigate directly from table to table in Word 2013
the cursor is not in the table to jump to the next table. place the cursor on any paragraph or table and press f5 (or use ctrl + g) to open the find and replace dialog box. the go to tab of the dialog box is automatically selected. select table in the go to what list> click next.
Create automatic table of contents in Word 2003
creating an automatic table of contents in word 2003 makes the document look more professional, easy to find the item you need by clicking on the table of contents. so how to create a table of contents in word fastest? the answer is to create an automatic table of contents!
MS Access 2003 - Lesson 12: Working with a table
you have learned how to create and design tables in access. and now it's time to learn how to manipulate all tables.
How to insert a table, create a table in Word 2016
you probably aren't familiar with tables in microsoft word. tables can be used to organize any type of content, whether text or digital. the table helps your document look more organized and organized. let's explore the table tips in word 2016.
The periodic tables have the weirdest shapes in the world not everyone knows
there are many scientists who try to arrange chemical elements into logical tables. those efforts have created periodic tables with strange shapes like this.
How to Play Table Football
table football, more commonly known as foosball or table soccer, is a popular table game played at bars and other establishments. this game is pretty straightforward, but there are a few simple rules you should keep in mind before diving...
How to create a table, insert a table in Excel 2016
how to create a table, insert a table in excel 2016. your excel data needs to be inserted as a table to facilitate the management and editing of content accordingly. let's refer to the article detailing how to create and edit tables in excel 2016
How to adjust the size of Word table cells equally
when entering content, the column length and width in the table will automatically change, leading to an uneven table layout. however, we can manually resize the columns in the word table.
10 Useful Table Formatting Tips in Microsoft Word
in microsoft word, tables are essential formatting tools. microsoft office has made it easy to create and format basic tables in word for office 365, word 2019, word 2016, and word 2013.
What is the Master Partition Table?
the master partition table is a component of the master boot record / sector that describes the partitions on the hard drive, such as their type and size, and comes with the disk signature and the master boot code to create the master boot record.

Table in CSS

You should read it

May be interested

CSS and CSS3